Question

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

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

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

Answer 2

正如@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>，所以如果有一天你想停止使用该插件，你就没有任何HTML可以更新
<select>已替换为<div>，因此它完全可以样式化
隐藏了<select>，但未移除：如果提交了表单，则会提交所选值，就像应该使用常规<select>

文档和下载：jQuery.simpleselect

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

2 个答案: