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

Question

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

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

我知道,谷歌,但我一直在寻找最后两个小时,我找不到满足我需求的东西.

它需要是:

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

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

Answer 1

我已经看到一些jQuery插件将其转换<select>为<ol>'s和<option>'s <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;
}

Answer 2

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

• 选择 - 在github上加载很酷的东西,7k +观察者.(在评论中提到'有偿书呆子')
• Select2 - 灵感来自Chosen,是Angular-UI的一部分,对Chosen进行了一些有用的调整.

是啊!

截至2012年,我发现的最轻量级,最灵活的解决方案之一是ddSlick.来自网站的相关(已编辑)信息:

• 添加图像和文本 select options
• 可以使用JSON填充选项
• 支持选择时的回调函数

这里是各种模式的预览:

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
• 但在开放状态下,你喜欢更好的本机体验来挑选选项(滚轮,箭头键,标签焦点,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上查看

Answer 6

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

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

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

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