是否可以devise一个select框？

我有一个HTMLselect框，我需要风格。 我宁愿只使用CSS，但如果我必须使用jQuery填补空白。

任何人都可以推荐一个很好的教程或插件？

我知道，谷歌，但我一直在寻找最近两个小时，我没有find任何符合我的需求。

它需要是：

• 兼容jQuery 1.3.2
• 无障碍
• 不显眼的
• 在样式select框的每个方面完全可定制

有谁知道任何能满足我的需求的东西？

Answer 1

我已经看到了一些jQuery插件，它们将<select>的<ol>和<option>为<li> ，这样你就可以用CSS来devise它了。 不要太难以推出自己的。

这里有一个： https ： //gist.github.com/1139558 （以前在这里 ，但是看起来网站已经closures了。）

像这样使用它：

 $('#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年，我所看到的两个值得检查的是：

• select – 很多很酷的东西，github上的7k +观察者。 （在评论中由“付费书呆子”提及）
• Select2 – 受到select的启发，Angular-UI的一部分，在select上做了一些有用的调整。

是啊！

---

截至2012年，我find的最轻量级，最灵活的解决scheme之一是ddSlick 。 相关（编辑）从网站的信息：

• 添加图像和文字以select options
• 可以使用JSON来填充选项
• 支持selectcallback函数

以下是各种模式的预览：

Answer 3

至于CSS，Mozilla似乎是最友善的，特别是FF 3.5+。 Webkit浏览器大多只是做自己的事情，而忽略任何风格。 IE是非常有限的，虽然IE8让你至less风格的边框颜色/宽度。

下面在FF 3.5+中看起来相当不错（当然，select你的颜色偏好）：

 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

我们已经find了一个简单而体面的方式来做到这一点。 它是跨浏览器，可降解的，不会打破表单发布。 首先将select框的不透明度设置为0。

 .select { opacity : 0; width: 200px; height: 15px; } <select class='select'> <option value='foo'>bar</option> </select> 

这是你仍然可以点击它

然后制作与select框相同尺寸的div。 div应该放在select框的背景下。 使用{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。 Easypeasy与jQuery：

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

而已！ 只需样式您的div而不是select框。 我没有testing上面的代码，所以你可能需要调整它。 但是，希望你能得到这个主意。

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

Answer 5

这是一个小插件，如果你最想要的

• 疯狂地定制select元素的closures状态
• 但在开放状态下 ，您更喜欢更好的本地体验来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上查看

Answer 6

你可以使用CSS本身的某种程度的风格

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

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

但是，这只会让你感到目前为止，并不总是看起来很好。 为了完全控制，你需要用一个你自己的小部件来replace通过jQueryselect的模拟select框的function。 确保当JS被禁用时，一个正常的select框在它的位置。 这可以让更多的用户使用你的表单，并且有助于访问。

Answer 7

大多数浏览器不支持使用CSS自定义select标签。 但是我发现这个JavaScript可以用来select标签样式。 但像往常一样不支持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的解决scheme。 一个链接，你可以看到一个工作的例子： http : //www.letmaier.com/_selectbox/select_general_code.html （样式与更多的CSS）

我的解决scheme的样式部分：

 <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标签中的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完全devise没有jQuery的select框。 例如，给出以下select框：

 <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')会创build一个样式化的select框，如下所示：

Answer 11

几天前 ，我创build了jQuery插件SelectBoxIt 。 它试图模仿常规HTMLselect框的行为，但也允许您使用jQueryUI来设置select框的样式和animation效果。 看看，让我知道你的想法。

http://www.selectboxit.com

Answer 12

你应该尝试使用像ikSelect这样的jQuery插件。

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

http://github.com/Igor10k/ikSelect

Answer 13

这似乎很老，但在这里是一个非常有趣的插件 – http://uniformjs.com

Answer 14

这个使用twitter-bootstrap样式来打开select dropdown菜单https://github.com/silviomoreto/bootstrap-select

Answer 15

简单的解决scheme是把你的select框转换成一个div，并devise与你的devise相匹配的div。 设置不透明度：0select框，它将使select框不可见。 用jQuery插入span标签，如果用户更改下拉值，则dynamic更改其值。 本教程中显示的总演示代码说明。 希望它能解决你的问题。

JQuery代码看起来像这样。

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