是否可以为选择框设置样式？[关闭]

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

谁能推荐一个好的教程或插件？

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

它必须是：

• 与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-受选择的启发，它是Angular-UI的一部分，并在选择上做了一些有用的调整。

是的

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

我们找到了一种简单而又体面的方法来做到这一点。它是跨浏览器的，可降解的，并且不会破坏表单发布。首先将选择框的不透明度设置为0。

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

因此，您仍然可以单击它

然后使div具有与选择框相同的尺寸。div应该位于选择框下面作为背景。使用{位置：绝对}和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;}。浏览器最多应该执行的操作是与表单元素进行交互，但绝不决定其最初在页面上的显示方式，因为这会破坏网站设计。

如果您最想的话，这里有个插头

• 发疯定制关闭状态一个的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上查看

您可以通过CSS本身在某种程度上样式化

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

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

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

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

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ 我注意到一个关于Onchange属性无效的错误

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

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

如果有没有jQuery的解决方案。您可以在其中看到工作示例的链接：http : //www.letmaier.com/_selectbox/select_general_code.html（样式带有更多CSS）

我的解决方案的样式部分：

<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完全样式化选择框而不使用jQuery 。例如，给定以下选择框：

<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')将创建一个样式选择框，如下所示：

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

http://www.selectboxit.com

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

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

http://github.com/Igor10k/ikSelect

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

这对使用的twitter-bootstrap样式把select在dropdown菜单 https://github.com/silviomoreto/bootstrap-select

一种简单的解决方案是在div中扭曲您的选择框，然后对与您的设计匹配的div进行样式设置。将opacity：0设置为选择框，它将使选择框不可见。使用jQuery插入span标记，如果用户更改下拉值，则动态更改其值。本教程中显示的全部演示以及代码说明。希望它能解决您的问题。

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>