Question

我有一个HTML选择框，我需要设置样式。我更喜欢使用CSS，但如果必须的话，我将使用jQuery填补空白。

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

我知道，谷歌，但我一直在寻找最近两个小时，我找不到任何满足我需求的东西。

需要：

与jQuery 1.3.2兼容
无障碍
不唐突的
完全可自定义选择框的每个方面的样式

有谁知道任何符合我需求的东西？

Answer 1

我已经看到一些jQuery插件将<select>转换为<ol>和<option>转换为<li>，以便您可以用CSS设计它。不可能太难推出自己的。

这是一个：https://gist.github.com/1139558（用于他here，但看起来网站已关闭。）

像这样使用：

$('#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;
}

Answer 2

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

Chosen - 很酷的东西，github上的7k +观察者。（在评论中提到'有偿的书呆子'）
Select2 - 灵感来自Chosen，是Angular-UI的一部分，对Chosen进行了一些有用的调整。

呀！

截至2012年，我发现的最轻量级，最灵活的解决方案之一是ddSlick。来自网站的相关（已编辑）信息：

将图片和文字添加到select options
可以使用JSON填充选项
支持选择的回调函数

以下是各种模式的预览：

enter image description here

Answer 3

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

Answer 4

我们找到了一种简单而体面的方法来做到这一点。它是跨浏览器，可降级的，并且不会破坏表单帖子。首先将选择框的不透明度设置为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轻松实现：

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

那就是它！只需设置div而不是选择框。我还没有测试过上面的代码，所以你可能需要调整它。但希望你能得到主旨。

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

Answer 5

如果你最想要

，这里有一点点插件

疯狂地自定义select元素的已关闭状态
但是在开放状态，您更喜欢更好的本机体验来选择选项（滚轮，箭头键，标签焦点，对options的ajax修改，正确的zindex等）
不喜欢凌乱的ul，li生成的标记

然后jquery.yaselect.js could be a better fit。简单地：

$('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

上查看

Answer 6

您可以在某种程度上使用CSS自定式

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

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

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

Answer 7

大多数浏览器不支持使用css自定义选择标记。但我发现这个javascript可以用来设置选择标签的样式。但通常不支持IE浏览器。

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

Answer 8

我刚刚发现这看起来非常好。

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

Answer 9

如果有一个没有jQuery的解决方案。您可以在其中看到一个工作示例的链接：http://www.letmaier.com/_selectbox/select_general_code.html（使用更多css设置样式）

我的解决方案的样式部分：

<style>
#container { margin: 10px; padding: 5px; background: #E7E7E7; width: 300px; background: #ededed); }
#ul1 { display: none; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; }
#container a {  color: #333333; text-decoration: none; }
#container ul li {  padding: 3px;   padding-left: 0px;  border-bottom: 1px solid #aaa;  font-size: 0.8em; cursor: pointer; }
#container ul li:hover { background: #f5f4f4; }
</style>

现在body-tag中的HTML代码：

<form>
<div id="container" onMouseOver="document.getElementById('ul1').style.display = 'block';" onMouseOut="document.getElementById('ul1').style.display = 'none';">
Select one entry: <input name="entrytext" type="text" disabled readonly>
<ul id="ul1">
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 1'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 1</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 2'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 2</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 3'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 3</a></li>
</ul>
</div>
</form>

Answer 10

2014年更新：您不需要jQuery 。您可以使用StyleSelect完全设置不带jQuery的选择框。例如，给出以下选择框：

<select class="demo">
  <option value="value1">Label 1</option>
  <option value="value2" selected>Label 2</option>
  <option value="value3">Label 3</option>
</select>

运行styleSelect('select.demo')会创建一个样式化的选择框，如下所示：

enter image description here

Answer 11

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

http://www.selectboxit.com

Answer 12

您应该尝试使用一些jQuery插件，例如 ikSelect 。

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

http://github.com/Igor10k/ikSelect

Answer 13

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

Answer 14

此操作使用twitter-bootstrap样式在select菜单中转换dropdown https://github.com/silviomoreto/bootstrap-select

Answer 15

简单的解决方案是将div中的选择框变形，并设置与您的设计相匹配的div。设置不透明度：0以选择框，它将使选择框不可见。使用jQuery插入span标记，并在用户更改下拉值时动态更改其值。显示的总演示in this tutorial包含代码说明。希望它能解决你的问题。

JQuery Code看起来与此类似。

 <script>
   $(document).ready(function(){
     $('.dropdown_menu').each(function(){
       var baseData = $(this).find("select option:selected").html();
       $(this).prepend("<span>" + baseData + "</span>");
     });

     $(".dropdown_menu select").change(function(e){
       var nodeOne = $(this).val();
       var currentNode = $(this).find("option[value='"+ nodeOne +"']").text();
       $(this).parents(".dropdown_menu").find("span").text(currentNode);
     });
   });
</script>

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

15 个答案: