如何设置表单下拉列表的样式？

Question

我已经在互联网上进行了广泛的搜索,但是没有找到任何关于如何设置表单中下拉列表的下拉部分的样式.我希望指向正确的方向.谢谢.

Answer 1

我一直在研究同样的问题.想出了一个非常简单的解决方案,使用一个比下拉本身短的持有者div.我还使用背景图像让下拉箭头看起来像我喜欢的样子.看看http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/

您只需要选择标记和2个CSS类的div.

HTML:

<div class="mainselection">
<select name="State" id="input7">
    <option></option>
    <option value="Alabama">Alabama</option>
    ...
    <option value="Wisconsin">Wisconsin</option>
    <option value="Wyoming">Wyoming</option>                              
</select>
</div>

CSS:

.mainselection {
    overflow:hidden;
    width:350px;
    margin-left:35px;
    background: url("images/dropdown_arrow.png") no-repeat #fff 319px 2px;
    /* dropdown_arrow.png is a 31x28 image */
}
select {
    border:0;
    background:transparent;
    height:32px;
    border:1px solid #d8d8d8;
    width:350px;
    -webkit-appearance: none;
}

然后经过一点Javascript验证后,我还可以将div上的类切换.dropdownbad为红色边框.

.dropdownbad {
    border:2px solid #c13339;
}

此处显示默认和错误状态:

Answer 2

您可以使用SELECT选择器应用样式或将类名应用于SELECT元素.但是,你会遇到IE <8的问题,将边界应用于元素.

然后,您可以使用OPTION选择器来定位选项.

SELECT { border: solid 1px red; font-weight: bold; }
OPTION { background:green; font-style: italic; }

应该使用粗体文本为您提供带红色边框的下拉菜单(如果在标准模式下使用FF或IE8),并且选项应为绿色背景的斜体.

Answer 3

如上所述，使用直接 html 几乎是不可能的，但我使用jQuery Combobox取得了很好的结果。