是否可以devise一个select框?

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

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

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

它需要是:

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

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

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

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

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

是啊!


截至2012年,我find的最轻量级,最灵活的解决scheme之一是ddSlick 。 相关(编辑)从网站的信息:

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

以下是各种模式的预览:

在这里输入图像说明

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

我们已经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。

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

  • 疯狂地定制select元素的closures状态
  • 但在开放状态下 ,您更喜欢更好的本地体验来select选项(滚轮,箭头键,选项卡焦点, options ajax修改,适当的zindex等)
  • 不喜欢凌乱的ulli生成的标记

然后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上查看

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

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

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

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

大多数浏览器不支持使用CSS自定义select标签。 但是我发现这个JavaScript可以用来select标签样式。 但像往常一样不支持IE浏览器。

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

如果有一个没有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> 

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框,如下所示:

在这里输入图像说明

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

http://www.selectboxit.com

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

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

http://github.com/Igor10k/ikSelect

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

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

简单的解决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>