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

Is it possible to style a select box?

提问by

I've got an HTML select box that I need to style. I'd prefer to use just CSS but if I have to I'll use jQuery to fill in the gaps.

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

Can anyone recommend a good tutorial or plugin?

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

I know, Google, but I've been searching for the last two hours and I'm not finding anything that meets my needs.

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

It needs to be:

它必须是：

• Compatible with jQuery 1.3.2
• Accessible
• Unobtrusive
• Completely customizable in terms of styling every aspect of a select box

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

Does anyone know anything that will meet my needs?

有谁知道什么可以满足我的需求？

采纳答案by Mark A. Nicolosi

I've seen some jQuery plugins out there that convert <select>'s to <ol>'s and <option>'s to <li>'s, so that you can style it with CSS. Couldn't be too hard to roll your own.

我已经看到一些 jQuery 插件可以将<select>'s转换为<ol>'s 和<option>'s 到<li>'s，这样您就可以使用 CSS 对其进行样式设置。自己动手也不会太难。

Here's one: https://gist.github.com/1139558(Used to he here, but it looks like the site is down.)

这是一个：https: //gist.github.com/1139558（习惯他在这里，但看起来该站点已关闭。）

Use it like this:

像这样使用它：

$('#myselectbox').selectbox();

Style it like this:

样式如下：

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;
}

回答by papercowboy

Update:As of 2013 the two I've seen that are worth checking are:

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

• Chosen- loads of cool stuff, 7k+ watchers on github. (mentioned by 'a paid nerd' in the comments)
• Select2- inspired by Chosen, part of Angular-UI with a couple useful tweaks on Chosen.

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

Yeah!

是的！

---

---

As of 2012 one of the most lightweight, flexible solutions I've found is ddSlick. Relevant (edited) info from the site:

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

• Adds images and text to select options
• Can use JSON to populate options
• Supports callback functions on selection

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

And here's a preview of the various modes:

这是各种模式的预览：

回答by arxpoetica

As for CSS, Mozilla seems to be the most friendly, especially from FF 3.5+. Webkit browsers mostly just do their own thing, and ignore any style. IE is very limited, though IE8 lets you at least style border color/width.

至于 CSS，Mozilla 似乎是最友好的，尤其是从 FF 3.5+ 开始。Webkit 浏览器大多只做自己的事情，而忽略任何风格。IE 非常有限，尽管 IE8 至少允许您设置边框颜色/宽度的样式。

The following actually looks fairly nice in FF 3.5+ (picking your color preference, of course):

以下在 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;
}

But when it comes to IE, you have to disable the background color on the option if you don't want it to display when the option menu isn't pulled down. And, as I said, webkit does its own thing.

但是当涉及到 IE 时，如果您不想在选项菜单未下拉时显示它，则必须禁用该选项的背景颜色。而且，正如我所说，webkit 做自己的事情。

回答by Shaun

We've found a simple and decent way to do this. It's cross-browser,degradable, and doesn't break a form post. First set the select box's opacity to 0.

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

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

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

this is so you can still click on it

这样你仍然可以点击它

Then make div with the same dimensions as the select box. The div should lay under the select box as the background. Use { position: absolute } and z-index to achieve this.

然后制作与选择框尺寸相同的 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>

Update the div's innerHTML with javascript. Easypeasy with jQuery:

使用 javascript 更新 div 的 innerHTML。Easypeasy 与 jQuery：

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

That's it! Just style your div instead of the select box. I haven't tested the above code so you'll probably need tweak it. But hopefully you get the gist.

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

I think this solution beats {-webkit-appearance: none;}. What browsers should do at the very most is dictate interaction with form elements, but definitely not how their initially displayed on the page as that breaks site design.

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

回答by choonkeat

Here's a little plug if you mostly want to

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

• go crazy customizing the closed stateof a selectelement
• but at open state, you favor a better native experience to picking options (scroll wheel, arrow keys, tab focus, ajax modifications to options, proper zindex, etc)
• dislike the messy ul, ligenerated markups

• 发疯定制关闭状态一个的select元素
• 但在打开状态下，您更喜欢选择选项（滚轮、箭头键、标签焦点、ajax 修改options、适当的 zindex 等）的更好的本机体验
• 不喜欢凌乱的ul、li生成的标记

Then jquery.yaselect.js could be a better fit. Simply:

那么jquery.yaselect.js 可能更合适。简单地：

$('select').yaselect();

And the final markup is:

最后的标记是：

<div class="yaselect-wrap">
  <div class="yaselect-current"><!-- current selection --></div>
</div>
<select class="yaselect-select" size="5">
  <!-- your option tags -->
</select>

Check it out on github.com

在github.com上查看

回答by alex

You can style to some degree with CSS by itself

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

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

But this is entirely up to the browser. Some browsers are stubborn.

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

However, this will only get you so far, and it doesn't always look very good. For complete control, you'll need to replace a select via jQuery with a widget of your own that emulates the functionality of a select box. Ensure that when JS is disabled, a normal select box is in its place. This allows more users to use your form, and it helps with accessibility.

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

回答by SRI

Most of the browsers doesn't support customizing of select tag using css. But I find this javascript which can be used to style select tag. But as usual no support for IE browsers.

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

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/I noticed an error on this that Onchange attribute dosen't work

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

回答by Jenny

I just found this which seems really good.

我刚刚发现这看起来非常好。

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

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

回答by Christoph Letmaier

If have a solution without jQuery. A link where you can see a working example: http://www.letmaier.com/_selectbox/select_general_code.html(styled with more css)

如果有没有 jQuery 的解决方案。您可以在其中查看工作示例的链接：http: //www.letmaier.com/_selectbox/select_general_code.html（使用更多 css 设计）

The style-section of my solution:

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

<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>

Now the HTML-code inside the body-tag:

现在 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>

回答by mikemaccana

Updated for 2014: You don't need jQuery for this. You can fully style a select box without jQuery using StyleSelect. Eg, given the following select box:

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>

Running styleSelect('select.demo')would create a styled select box as follows:

运行styleSelect('select.demo')将创建一个样式化的选择框，如下所示：