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

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

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

jQuery 替代品的示例如下：https : //stackoverflow.com/a/8450718/158014