我有一个需要设置样式的 HTML 选择框。我更喜欢只使用 CSS，但如果必须，我会使用 jQuery 来填补空白。
谁能推荐一个好的教程或插件？
我知道，谷歌，但我一直在寻找过去两个小时，我没有找到任何满足我需求的东西。
它需要是：
- 兼容 jQuery 1.3.2
- 无障碍
- 不显眼
- 在样式选择框的各个方面完全可定制
有谁知道什么可以满足我的需求？
160482 次
15 回答
45
我已经看到一些 jQuery 插件可以将<select>'s 转换为<ol>'s 和<option>'s 转换为<li>'s，以便您可以使用 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;
}
于 2009-07-02T03:10:27.873 回答
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 做自己的事情。
于 2010-06-18T17:39:53.267 回答
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;}。浏览器最多应该做的是决定与表单元素的交互，但绝对不是它们最初在页面上的显示方式，因为这会破坏网站设计。
于 2012-03-11T19:17:57.873 回答
10
如果您最想要的话，这里有一个小插件
- 疯狂自定义元素的关闭状态
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>
于 2011-03-09T04:19:33.863 回答
5
您可以在某种程度上使用 CSS 自己设置样式
select {
background: red;
border: 2px solid pink;
}
但这完全取决于浏览器。有些浏览器很顽固。
但是，这只会让您到目前为止，而且看起来并不总是很好。为了完全控制，您需要将通过 jQuery 的选择替换为您自己的小部件，该小部件模拟选择框的功能。确保当 JS 被禁用时，一个普通的选择框在它的位置。这允许更多用户使用您的表单，并且有助于提高可访问性。
于 2009-07-02T03:06:11.877 回答
4
大多数浏览器不支持使用 css 自定义选择标签。但我发现这个 javascript 可以用来设置选择标签的样式。但是像往常一样不支持IE浏览器。
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ 我注意到 Onchange 属性不起作用的错误
于 2010-11-22T11:45:33.353 回答
4
于 2011-12-28T21:13:07.010 回答
2
如果有没有 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>
于 2014-02-07T18:00:15.900 回答
2
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')将创建一个样式选择框，如下所示：
于 2014-10-27T14:22:31.690 回答
1
几天前，我创建了 jQuery 插件SelectBoxIt。它试图模仿常规 HTML 选择框的行为，但也允许您使用 jQueryUI 设置选择框的样式和动画。看看，让我知道你的想法。
于 2012-04-18T06:01:10.130 回答
1
于 2012-05-04T21:59:54.477 回答
1
这看起来很旧，但这里有一个非常有趣的插件 - http://uniformjs.com
于 2012-08-11T07:45:07.783 回答
0
这使用样式twitter-bootstrap打开select菜单dropdownhttps://github.com/silviomoreto/bootstrap-select
于 2013-03-13T15:08:37.147 回答
-1
简单的解决方案是将您的选择框扭曲在 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>
于 2014-08-04T22:52:49.953 回答