CSS - 使用SELECT标签时下拉框的Border Radius？不是SELECT输入它自己，实际下拉框？

我试图设计一个选择下拉框。CSS - 使用SELECT标签时下拉框的Border Radius？不是SELECT输入它自己，实际下拉框？

到目前为止，我已经通过将特定样式应用于选择标签，在下拉框本身（带有选项的下拉框）中实现了样式化效果。

这是迄今为止我已经使用了CSS：

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适用于输入，并使用标签的特定页面中找到。

现在，这样做的风格在焦点事件的下拉框，与背景转换为蓝色（在Firefox中工作）我想要做的，但是添加一个弯曲的边框到下拉框，以便它与选择输入本身融合更多。

这将实现的效果是这样的：

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

与此相比（请原谅我的原油例子）：

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

我不知道这是可能的，甚至还，因为我已经应用到select标签的背景样式正在生效，但是border radius样式仅适用于SELECT输入本身，而不适用于下拉框。

会有人在这方面有更多的知识，请花几分钟来启迪我？

是否可以在下拉框中添加曲线边框，还是仅可以使用曲线边框设置SELECT输入的样式？

来源

2012-01-19 Craig van Tonder

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

如果你以某种方式想要它，它不会跨浏览器兼容。

一个jQuery替代品的一个例子是在这里：https://stackoverflow.com/a/8450718/158014

来源

2012-01-19 14:47:51 Jakub

谢谢您的意见！正如你给了我一个好主意背后的灵感:) –

由于@jakub mentionned，你将不能够使用的样式和<select>标签<option>您选择下拉菜单。

这就是为什么我曾把这个jQuery插件：jQuery.simpleselect

它复制了HTML <select>的使用div的，这样就可以样式任何你想要的行为，但是你想要的。而且它真的很容易使用：

HTML

<select id="the_select" name="the_select"> 
    <option value="1">One</option> 
    <option value="2" selected="selected">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
</select>

$("#the_select").simpleselect();

的JavaScript的这条线将改变你的常规<select>到HTML低于

<div class="hidden_select_container"> 
    <select id="the_select" name="the_select" class="simpleselected"> 
    <option value="1">One</option> 
    <option value="2" selected="selected">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
    </select> 
</div> 
<div class="simpleselect" id="simpleselect_the_select"> 
    <div class="placeholder">Two</div> 
    <div class="options"> 
    <div class="option">One</div> 
    <div class="option">Two</div> 
    <div class="option">Three</div> 
    <div class="option">Four</div> 
    </div> 
</div>

这种行为具有多重优势：

您保持定期编写<select> S，所以，如果有一天你想停止使用该插件，你没有任何HTML更新
的<select>是与<div>条取代的，所以它是完全设置样式
的<select>是隐藏的，不会被删除：如果表单提交，选择的值将被提交像它应该是一个普通<select>

文件和下载：jQuery.simpleselect

来源

2012-09-20 17:45:58 Pioul

CSS - 使用SELECT标签时下拉框的Border Radius？不是SELECT输入它自己，实际下拉框？

回答

相关问题