是否可以为选择框设置样式?

Asked
Viewd157680

145

我有一个需要设置样式的HTML选择框。我宁愿只使用CSS,但是如果需要的话,我将使用jQuery填补空白。

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

我知道,谷歌,但是我一直在搜索过去两个小时,但找不到符合我需要的内容。

它必须是:

  • 与jQuery 1.3.2兼容
  • 可访问
  • 不张扬
  • 完全可自定义样式选择框的各个方面

有人知道什么可以满足我的需求吗?

  • +1提供了很好的说明和格式!

    ManishDecember 21, 2009 14:18
  • 您的意思是您想要一个可定制的下拉列表(内置于jquery中),对吗?因为选择框甚至不是浏览器对象(它们是平台对象),非常简单,非常原始,并且您无法为其设置很多样式(例如,不能为边框设置样式)

    AyyashJuly 02, 2009 03:06

15 个答案

45

我已经看到了一些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;
}
 
  • 我自己没有使用过。演示版(http://www.brainfault.com/demo/selectbox/0.5/)看起来不错。看看其他实现。我知道我已经看到了其他几个可以做到这一点的插件。

    Mark A. NicolosiJuly 02, 2009 04:51
  • 我最初尝试了此版本,但DIV相对于选择框的位置没有定位。相反,它的位置很难位于左侧。

    July 02, 2009 04:16
4

大多数浏览器不支持使用CSS自定义选择标记。但是我找到了可用于样式选择标记的javascript。但是像往常一样,不支持IE浏览器。

http://ryanfait.com/resources/custom-checkboxes-and -单选按钮/ 我注意到一个错误,即Onchange属性无效

4

我刚刚发现这看起来真的很好。

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

1

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

http://www.selectboxit.com

10

如果您最想这么做的话,这里有个小插头

  • 疯狂定制select元素的关闭状态
  • 但是在打开状态时,您倾向于更好的本机体验来选择选项(滚轮,箭头键,标签焦点,对ajax的options修改,正确的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

上查看
14

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

5

您可以通过CSS本身在某种程度上进行样式设置

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

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

但是,这只会让您受益匪浅,而且看起来并不总是那么好。为了进行完全控制,您需要使用自己的小部件来替代通过jQuery进行的选择,该小部件可以模拟选择框的功能。确保禁用JS后,将使用普通选择框。这样可以让更多的用户使用您的表单,并有助于辅助功能。

1

您应该尝试使用诸如 ikSelect 之类的jQuery插件。

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

http://github.com/Igor10k/ikSelect

11

我们找到了一种简单而又体面的方法。它是跨浏览器的,可降解的,并且不会破坏表单发布。首先将选择框的不透明度设置为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的Easypeasy:

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

就是这样!只需为div设置样式,而不是选择框即可。我尚未测试以上代码,因此您可能需要对其进行调整。但希望您能掌握要点。

我认为该解决方案胜过{-webkit-appearance:none;}。浏览器最多应该执行的操作是与表单元素进行交互,但绝对不是它们最初如何显示在页面上,因为这会破坏网站设计。