是否可以设计一个选择框？

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

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

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

它需要是：

与jQuery 1.3.2兼容

无障碍

不显眼的

就选择框的每个方面而言，完全可定制

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

---

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

---

更新：截至2013年，我见过的值得检查的两个是：

选择 - 很多很酷的东西，github上的7k +观察者。 （在评论中被'付费书呆子'提及）

Select2 - 受到Chosen的启发，是Angular-UI的一部分，同时对Chosen进行了一些有用的调整。

是啊！

---

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

添加图像和文字以select options

可以使用JSON来填充选项

在选择时支持回调函数

以下是各种模式的预览：

---

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

链接地址: http://www.djcxy.com/p/7157.html

上一篇: Is it possible to style a select box?

下一篇: How to center align vertically the container in bootstrap