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

我在互联网上进行了广泛的搜索，但没有找到任何关于如何在表单中设置下拉列表的下拉部分样式的有用信息。我希望能指出正确的方向。谢谢。

我已经研究同样的问题有一段时间了。想出了一个非常简单的解决方案，使用比下拉列表本身更短的保持器 div。我还使用背景图像使下拉箭头看起来像我喜欢的方式。一探究竟http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/ http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/

您所需要的只是一个围绕 select 标签的 div 和 2 个 CSS 类。

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

默认状态和错误状态如下所示：