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

【问题标题】：Is it possible to style a select box? [closed]是否可以设置选择框的样式？ [关闭]
【发布时间】：2010-11-07 12:27:07
【问题描述】：

我有一个需要设置样式的 HTML 选择框。我更喜欢只使用 CSS，但如果必须，我会使用 jQuery 来填补空白。

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

我知道，Google，但过去两个小时我一直在搜索，但没有找到任何满足我需求的东西。

必须是：

兼容 jQuery 1.3.2
无障碍
不显眼
完全可自定义选择框各个方面的样式

有人知道什么可以满足我的需要吗？

【问题讨论】：

你的意思是你想要一个可定制的下拉菜单（内置 jquery），对吧？因为选择框甚至不是浏览器对象（它们是平台对象），非常简单，非常原始，并且您无法设置大部分样式（例如，您无法设置边框样式）
+1 以获得很好的解释和格式！
Chosen 值得一提，但不是很可定制，并且有很多未解决的问题。不过，很好看和使用。
@Ayyash 您所说的对于某些系统（当然是 Mac OS）上的 MSHTML（Internet Explorer 和朋友）和 WebCore（Safari）是正确的。 Gecko（Firefox 和朋友）并非如此。所以实际的问题是您不能跨浏览器设置select 元素的样式。但如果人们愿意接受这些差异，您可以为它们设置样式——包括边框。
@PointedEras 是的，在 2012 年他们可以，但我猜那是 3 年前当我说我所说的时，我很确定我当时给了一个机会，但它没有工作

标签： jquery css html-select

【解决方案1】：

您可以在某种程度上使用 CSS 自己设置样式

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

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

但是，这只会让您走这么远，而且看起来并不总是很好。为了完全控制，您需要将通过 jQuery 的选择替换为您自己的小部件，该小部件模拟选择框的功能。确保当 JS 被禁用时，一个普通的选择框在它的位置。这允许更多用户使用您的表单，并且有助于提高可访问性。

【讨论】：

【解决方案2】：

我见过一些 jQuery 插件可以将 <select> 转换为 <ol> 和 <option> 转换为 <li> ，以便您可以使用 CSS 设置样式。自己动手也太难了。

这是一个：https://gist.github.com/1139558（以前他是here，但看起来网站已经关闭了。）

像这样使用它：

$('#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;
}

【讨论】：

我最初尝试了这个版本，但 DIV 没有相对于选择框所在的位置定位。相反，它的位置很靠左。
我自己没用过这个。演示 (brainfault.com/demo/selectbox/0.5) 看起来不错。环顾四周寻找其他实现。我知道我见过其他几个可以做到这一点的插件。
我尝试了这个并且它工作了一段时间，直到我不得不在页面上放置多个。现在很难设置样式，因为出于某种愚蠢的原因，作者认为可以为所有元素使用相同的 ID，而不是唯一的 ID 或类。现在我正在考虑编写自己的...
404 - 有镜子的地方有什么想法吗？
请注意，屏幕阅读器无法访问大多数精选菜单插件。还没有找到一个有效的。

【解决方案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 做自己的事情。

【讨论】：

【解决方案4】：

大多数浏览器不支持使用 css 自定义选择标签。但我发现这个 javascript 可以用来设置选择标签的样式。但像往常一样不支持 IE 浏览器。

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

【讨论】：

【解决方案5】：

如果您最想这样做，这里有一个小插件

疯狂地自定义select 元素的关闭状态
但在打开状态，您更喜欢选择选项（滚轮、箭头键、标签焦点、对options 的 ajax 修改、正确的 zindex 等）提供更好的原生体验。
不喜欢乱七八糟的ul、li 生成的标记

然后jquery.yaselect.js could be a better fit。简单地说：

$('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

【讨论】：

它很棒，也可以在移动设备上运行 :)
适用于 IOS。抱歉，我无法访问 android 等？
这不是问题，是赞美。它确实在我的 android 上运行良好。

【解决方案6】：

我刚刚发现这个看起来很不错。

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

【讨论】：

【解决方案7】：

我们找到了一种简单而体面的方法来做到这一点。它是跨浏览器、可降解的，并且不会破坏表单帖子。首先将选择框的不透明度设置为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。 Easypeasy 与 jQuery：

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

就是这样！只需设置您的 div 而不是选择框的样式。我没有测试上面的代码，所以你可能需要调整它。但希望你能明白要点。

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

【讨论】：

【解决方案8】：

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

http://www.selectboxit.com

【讨论】：

【解决方案9】：

您应该尝试使用一些 jQuery 插件，例如 ikSelect。

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

http://github.com/Igor10k/ikSelect

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

Chosen - 大量很酷的东西，github 上有 7k+ 的观察者。（由 cmets 中的“付费书呆子”提及）
Select2 - 受到 Chosen 的启发，它是 Angular-UI 的一部分，对 Chosen 做了一些有用的调整。

是的！

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

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

以下是各种模式的预览：

【讨论】：

【解决方案12】：

this on 使用twitter-bootstrap 样式打开selectin dropdown 菜单 https://github.com/silviomoreto/bootstrap-select

【讨论】：

【解决方案13】：

如果有没有 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-tag 中的 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>

【讨论】：

请提供一个例子而不是仅仅链接到一个。
我按照您的要求更改了答案。
现在看起来好多了。顺便说一句，链接到工作示例或显示示例的源没有任何问题（这可能很有帮助）。但随着时间的推移，链接不可避免地会变得无效，因此即使提供了有用的链接，也希望始终在答案本身（您提供的）中提供必要的信息。
好的，明白了...:-) 我会尽力保持链接有效...

【解决方案14】：

简单的解决方案是将您的选择框扭曲到一个 div 中，并设置与您的设计相匹配的 div 样式。将 opacity:0 设置为选择框，它将使选择框不可见。如果用户更改下拉值，则使用 jQuery 插入 span 标签并动态更改其值。显示的全部演示 in this tutorial 带有代码说明。希望它能解决你的问题。

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>

【讨论】：

【解决方案15】：

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

【讨论】：

旁注，不支持IE9及以下