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

CSS - Border Radius for the drop down box when using the SELECT tag? Not the SELECT input ittself, the actual drop down box?

提问by Craig van Tonder

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.

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

Here is the css I have used so far:

这是我到目前为止使用的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;
}

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

此 css 适用于在特定页面中找到的 INPUT 和 SELECT 标记。

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.

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

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.

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

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?

是否可以向下拉框添加曲线边框，或者是否只能使用曲线边框设置 SELECT 输入的样式？

采纳答案by Jakub

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.

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

If you got it somewhat that way you wanted, it would not be cross-browser compatible.

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

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

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

回答by Pioul

As @jakub mentionned, you won't be able to style your select dropdown using <select>and <option>tags.

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

That's why I once made this jQuery plugin: jQuery.simpleselect

这就是为什么我曾经制作了这个 jQuery 插件：jQuery.simpleselect

It replicates the behavior of a HTML <select>using divs so that you can style whatever you want, however you want. And it's really easy to use:

它<select>使用 div复制 HTML 的行为，以便您可以根据需要设置任何样式。而且它真的很容易使用：

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

JS

JS

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

This line of JavaScript will transform your regular <select>into the HTML below

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

This behavior has multiple advantages:

这种行为有多个优点：

• You keep writing regular <select>s, so if one day you want to stop using the plugin, you don't have any HTML to update
• The <select>is replaced with <div>s, so it's fully styleable
• The <select>is hidden, not removed: if the form is submitted, the selected value WILL be submitted like it should be with a regular <select>

• 你一直在写常规的<select>s，所以如果有一天你想停止使用这个插件，你没有任何 HTML 可以更新
• 将<select>被替换为<div>S，所以它是完全设置样式
• 该<select>是隐藏的，不会被删除：如果表单提交，选择的值将被提交像它应该是一个普通<select>

Doc and download: jQuery.simpleselect

文档和下载：jQuery.simpleselect