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

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

到目前为止，通过将某些样式应用于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 )

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

我甚至不知道这是否可行，因为我应用于选择标记的背景样式即将生效，但边框半径样式仅应用于选择输入本身，而不是下拉框

如果有人在这方面有更多的知识，请花几分钟来启发我

---

是否可以将曲线边框添加到下拉框中，或者仅可以使用曲线边框设置选择输入的样式？

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

如果您以您想要的方式获得它，那么它将无法跨浏览器兼容

---

这里有一个jQuery替代的例子：

正如@jakub所提到的，您将无法使用

和

标记来设置select下拉列表的样式

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

它使用div复制HTML

的行为，以便您可以随心所欲地设置样式。而且它非常容易使用：

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

这行JavaScript将把常规的

转换为下面的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>

一个
两个
三
四
两个
一个
两个
三
四

这种行为有多个优点：

• 你经常写
  s，所以如果有一天你想停止使用插件，你没有任何HTML要更新

• 替换为
  s，因此它完全可以设置样式

• 是隐藏的，而不是删除的：如果表单已提交，则所选值将与常规
  一样提交

---

文档和下载：

感谢您的输入！正如你为我提供了一个好主意背后的灵感：）

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

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