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

Question

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

到目前为止，我通过将某些样式应用于 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 适用于特定页面中的 INPUT 和 SELECT 标记。

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

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

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

与此相比（请原谅我的粗略示例）：

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

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

有这方面知识多一些的，请花几分钟给我指点一下？

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

Answer 1

正如@jakub 提到的，您将无法使用<select> 和<option> 标签来设置您的选择下拉菜单的样式。

这就是我曾经制作这个 jQuery 插件的原因：jQuery.simpleselect

它使用 div 复制 HTML <select> 的行为，因此您可以随意设置样式。而且它真的很容易使用：

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>​

JS

$("#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>s，因此完全可以设置样式
• <select> 被隐藏，未删除：如果提交表单，将提交所选值，就像使用常规 <select> 一样

文档和下载：jQuery.simpleselect

Answer 2

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

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

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