是否可以设置选择框的样式？

您可以在一定程度上使用 CSS 自己设计样式

select {
background: red;
border: 2px solid pink;
}

但这完全取决于浏览器，有些浏览器很顽固。

然而，这只能让你到目前为止，它并不总是看起来很好。为了实现完全控制，需要使用自己的小部件模拟选择框的功能，通过 jQuery 替换选择。确保在禁用 JS 时，有一个正常的选择框在其位置上。这允许更多的用户使用您的表单，并且有助于提高可访问性。

我见过一些 jQuery 插件，它们可以将 <select>转换成 <ol>，将 <option>转换成 <li>，这样你就可以用 CSS 来设计它了。自己卷也不难。

这里有一个: https://gist.github.com/1139558(用于他的 给你，但它看起来像网站是关闭的。)

像这样使用它:

$('#myselectbox').selectbox();

这样设计:

div.selectbox-wrapper ul {
list-style-type:none;
margin:0px;
padding:0px;
}
div.selectbox-wrapper ul li.selected {
background-color: #EAF2FB;
}
div.selectbox-wrapper ul li.current {
background-color: #CDD8E4;
}
div.selectbox-wrapper ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
cursor:pointer;
}

至于 CSS，Mozilla 似乎是最友好的，尤其是来自 FF 3.5 + 的。Webkit 浏览器大多只做自己的事情，忽略任何样式。IE 是非常有限的，尽管 IE8允许您至少样式边框颜色/宽度。

下面的图片在 FF 3.5 + 中看起来相当不错(当然是选择你喜欢的颜色) :

select {
-moz-border-radius: 4px;
-moz-box-shadow: 1px 1px 5px #cfcfcf inset;
border: 1px solid #cfcfcf;
vertical-align: middle;
background-color: transparent;
}
option {
background-color: #fef5e6;
border-bottom: 1px solid #ebdac0;
border-right: 1px solid #d6bb86;
border-left: 1px solid #d6bb86;
}
option:hover {
cursor: pointer;
}

但是在 IE 浏览器中，如果你不想在选项菜单没有被拉下时显示背景色，你就必须禁用它。而且，就像我说的，webkit 做自己的事情。

大多数浏览器不支持使用 css 定制 select 标记。但是我发现这个 javascript 可以用来样式选择标签。但是像往常一样不支持 IE 浏览器。

Http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ 我注意到这里有一个错误，Onchange 属性不起作用

如果你愿意的话，这里有个小插头

• 疯狂定制 select元素的 封闭状态
• 但是在 开放州中，您更喜欢选择选项(滚轮、箭头键、制表符焦点、对 options的 ajax 修改、适当的 zindex 等)
• 不喜欢杂乱的 ul，li产生的标记

然后是 Jquery.yaselect.js 可能更适合。简单地说:

$('select').yaselect();

最后一个标记是:

<div class="yaselect-wrap">
<div class="yaselect-current"><!-- current selection --></div>
</div>
<select class="yaselect-select" size="5">
<!-- your option tags -->
</select>

看看 Github.com频道

我刚找到这个，看起来很不错。

Http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

我们找到了一个简单体面的方法。它是跨浏览器的，可降解的，而且不会破坏一个表格帖子。首先将选择框的不透明度设置为0。

.select {
opacity : 0;
width: 200px;
height: 15px;
}


<select class='select'>
<option value='foo'>bar</option>
</select>

这样你还可以点击它

然后使用与选择框相同的尺寸创建 div。Div 应该放在选择框下作为背景。使用{ position: Absolal}和 z-index 实现此目的。

.div {
width: 200px;
height: 15px;
position: absolute;
z-index: 0;
}


<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
<option value='foo'>bar</option>
</select>

用 javascript 更新 div 的 innerHTML:

$('.select').click(function(event)) {
$('.div').html($('.select option:selected').val());
}

就是这样！只要设置 div 的样式，而不是选择框。我还没有测试上面的代码，所以你可能需要调整它。但希望你能明白我的意思。

我认为这个解决方案胜过{-webkit-look: none; }。浏览器最应该做的就是指定与表单元素的交互，但绝对不能指定它们最初在页面上的显示方式，因为这会破坏站点设计。

几天前，我创建了 jQuery 插件 SelectBoxIt。它试图模拟常规 HTML 选择框的行为，但也允许您使用 jQueryUI 对选择框进行样式化和动画化。看一下，然后告诉我你的想法。

Http://www.selectboxit.com

您应该尝试使用一些像 IkSelect这样的 jQuery 插件。

我试图使它非常可定制，但易于使用。

Http://github.com/igor10k/ikselect

这看起来很旧，但是这里有一个非常有趣的插件 -http://uniformjs.com

更新: 截至2013年，我看到的两个值得检查的是: