CSS - 使用 SELECT 标签时下拉框的边框半径?不是 SELECT 输入本身，实际的下拉框?

2022-01-18 00:00:00 select border tags css

我正在尝试设置选择下拉框的样式.

I am trying to style a select drop down box.

到目前为止，我通过将某些样式应用于选择标签，在下拉框本身(带有选项的下拉框)内实现了样式效果.

So far, I have achieved a styled effect within the drop down box itself (the box that drops down with the options) by applying certain styles to the select tag.

这是我目前使用的css:

Here is the css I have used so far:

input, select {
    background: #fcfcfc;
    padding: 7px 25px;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6a6f75;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: , 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-background-clip: padding-box;
    -webkit-transition: all 0.7s ease-out 0s;  /* Saf3.2+, Chrome */
    -moz-transition: all 0.7s ease-out 0s;  /* FF4+ */
    -ms-transition: all 0.7s ease-out 0s;  /* IE10? */
    -o-transition: all 0.7s ease-out 0s;  /* Opera 10.5+ */
    transition: all 0.7s ease-out 0s;
}

select {
    padding: 7px 10px;
}

input:focus, select:focus
{
    background: #6699cc;
    color: #e7f3ff;
    text-shadow:
        -1px -1px 0 #666,
        1px -1px 0 #666,
        -1px 1px 0 #666,
        1px 1px 0 #666;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}

此 css 适用于特定页面中的 INPUT 和 SELECT 标记.

This css applies to the INPUT and SELECT tags found within a specific page.

现在，这确实为焦点事件上的下拉框设置样式，背景转换为蓝色(在 Firefox 中有效)我想做的是向下拉框添加一个弯曲的边框，以便它融合更多的是选择输入本身.

Now, this does style the drop down box on the focus event, with the background transforming to blue (works in Firefox) What I want to do though, is add a curved border to the drop down box, so that it blends in more with the select input itself.

这将实现类似这样的效果:

This will achieve an effect something like this:

( Choose )
( Option )
| Option |
( Option )

与此相比(请原谅我的粗略示例):

In comparison to this (please forgive my crude examples):

( Choose )
| Option |
| Option |
| Option |

我不知道这是否可能，因为我应用于 select 标签的背景样式正在生效，但边框半径样式仅应用于 SELECT 输入本身而不是下拉框.

I don't know if this is even possible yet, as the background styles I have applied to the select tag are coming into effect, but the border radius styles are only applied to the SELECT input itself and not the drop down box.

有没有这方面知识比较多的人，请花几分钟给我指点一下?

Would someone with some more knowledge in this regard, please take a few minutes to enlighten me?

是否可以为下拉框添加弧形边框，还是只能使用弧形边框设置 SELECT 输入的样式?

Is it possible to add a curved border to the drop down box, or is it only possible to style the SELECT input with a curved border?

推荐答案

你将无法实现这种 SELECT DROPDOWN 样式，使用标准的 HTML 表单元素，你必须用 DIV 非表单替换"下拉/选择元素，然后将所选值更新为隐藏的表单元素或隐藏的选择下拉菜单.

You will not be able to achieve this SELECT DROPDOWN style, with standard HTML form elements, you would have to 'substitute' the dropdown / select with DIV non form elements, then update the selected value to either a hidden form element or a hidden select dropdown.

如果你以你想要的方式得到它，它就不会跨浏览器兼容.

If you got it somewhat that way you wanted, it would not be cross-browser compatible.

这里是一个 jQuery 替代示例:https://stackoverflow.com/a/8450718/158014

An example of a jQuery substitute is here: https://stackoverflow.com/a/8450718/158014

相关文章