CSS - 使用SELECT标签时的下拉框的边框半径？不是SELECT输入ittself，实际下拉框？ [英] CSS - Border Radius for the drop down box when using the SELECT tag? Not the SELECT input ittself, the actual drop down box?

问题描述

到目前为止，我已经在下拉框中实现了样式化的效果（下拉框

这里是我到目前为止使用的css：

 输入，选择{
 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） 
 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; 
} 
 
输入：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标签。 / p>

现在，这样做的焦点事件上的下拉框，背景转换为蓝色（在Firefox中有效）。我想做的是添加一个弯曲

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

 （Choose）
（Option）
 |选项| 
（可选）
  

与此相比（请原谅我的原始例子） p>

 （Choose）
 |选项| 
 |选项| 
 |选项| 
  

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

有人在这里有一些更多的知识请考虑几分钟才能启发我？

可以在下拉框中添加一个曲线边框，或者只能对SELECT输入带有弯曲边框？

解决方案

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

一个jQuery替换的例子在这里： http://stackoverflow.com/a/8450718/158014

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.

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;
}

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

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 |

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?

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?

解决方案

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.

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

这篇关于CSS - 使用SELECT标签时的下拉框的边框半径？不是SELECT输入ittself，实际下拉框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！