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

Question

我有一个需要设置样式的HTML选择框。我宁愿只使用CSS，但是如果需要的话，我将使用jQuery填补空白。

有人可以推荐一个好的教程或插件吗？

我知道，谷歌，但是我一直在搜索过去两个小时，但找不到符合我需要的内容。

它必须是：

与jQuery 1.3.2兼容
可访问
不张扬
完全可自定义样式选择框的各个方面

有人知道什么可以满足我的需求吗？

score 45 · Accepted Answer · July 02, 2009 03:10

我已经看到了一些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;
}

score 4 · Answer 2 · November 22, 2010 11:45

大多数浏览器不支持使用CSS自定义选择标记。但是我找到了可用于样式选择标记的javascript。但是像往常一样，不支持IE浏览器。

http://ryanfait.com/resources/custom-checkboxes-and -单选按钮/ 我注意到一个错误，即Onchange属性无效

score 4 · Answer 3 · December 28, 2011 21:13

我刚刚发现这看起来真的很好。

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

score 1 · Answer 4 · April 18, 2012 06:01

几天前，我创建了jQuery插件 SelectBoxIt 。它试图模仿常规HTML选择框的行为，但是还允许您使用jQueryUI设置选择框的样式和动画效果。看一看，让我知道你的想法。

http://www.selectboxit.com

score 10 · Answer 5 · March 09, 2011 04:19

如果您最想这么做的话，这里有个小插头

疯狂定制select元素的关闭状态
但是在打开状态时，您倾向于更好的本机体验来选择选项（滚轮，箭头键，标签焦点，对ajax的options修改，正确的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

上查看

score 14 · Answer 6 · June 18, 2010 17:39

对于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会做自己的事情。

score 5 · Answer 7 · July 02, 2009 03:06

您可以通过CSS本身在某种程度上进行样式设置

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

但这完全取决于浏览器。一些浏览器很固执。

但是，这只会让您受益匪浅，而且看起来并不总是那么好。为了进行完全控制，您需要使用自己的小部件来替代通过jQuery进行的选择，该小部件可以模拟选择框的功能。确保禁用JS后，将使用普通选择框。这样可以让更多的用户使用您的表单，并有助于辅助功能。

score 1 · Answer 8 · May 04, 2012 21:59

您应该尝试使用诸如 ikSelect 之类的jQuery插件。

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

http://github.com/Igor10k/ikSelect

score 11 · Answer 9 · March 11, 2012 19:17

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

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

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

因此，您仍然可以点击

然后使div具有与选择框相同的尺寸。 div应该位于选择框下方作为背景。使用{position：absolute}和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。使用jQuery的Easypeasy：

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

就是这样！只需为div设置样式，而不是选择框即可。我尚未测试以上代码，因此您可能需要对其进行调整。但希望您能掌握要点。

我认为该解决方案胜过{-webkit-appearance：none;}。浏览器最多应该执行的操作是与表单元素进行交互，但绝对不是它们最初如何显示在页面上，因为这会破坏网站设计。

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

15 个答案