CSS 如何设置表单下拉列表的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1337149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I style form drop down lists?
提问by forrest
I have searched far and wide on the Internet but have not found anything helpful regarding how to style the dropdown portion of a dropdown list in a form. I would appreciate a pointer in the right direction. Thanks.
我在 Internet 上进行了广泛的搜索，但没有找到任何关于如何在表单中设置下拉列表的下拉部分样式的有用信息。我将不胜感激指向正确方向的指针。谢谢。
采纳答案by Jon Hadley
As mentioned above it's pretty much impossible to do using straight html, I have had good results with jQuery Comboboxthough.
如上所述，使用直接的 html 几乎是不可能的，但我使用jQuery Combobox取得了不错的结果。
回答by Daniel
I've been working on the same problem for a while. Came up with a pretty simple solution using a holder div that is shorter then the dropdown itself. I also use a background image to get the dropdowns arrow to look the way I like. Check it out http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/
我一直在研究同样的问题一段时间。使用比下拉菜单本身更短的持有人 div 提出了一个非常简单的解决方案。我还使用背景图像使下拉箭头看起来像我喜欢的样子。看看http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/
All you need is a div around the select tag and 2 CSS classes.
您只需要一个围绕 select 标签和 2 个 CSS 类的 div。
HTML:
HTML：
<div class="mainselection">
<select name="State" id="input7">
<option></option>
<option value="Alabama">Alabama</option>
...
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</div>
CSS:
CSS：
.mainselection {
overflow:hidden;
width:350px;
margin-left:35px;
background: url("images/dropdown_arrow.png") no-repeat #fff 319px 2px;
/* dropdown_arrow.png is a 31x28 image */
}
select {
border:0;
background:transparent;
height:32px;
border:1px solid #d8d8d8;
width:350px;
-webkit-appearance: none;
}
Then after a little Javascript verification, I can also switch the class on the div to .dropdownbadto give it a red border.
然后经过一点Javascript验证，我也可以将div上的类切换.dropdownbad为给它一个红色边框。
.dropdownbad {
border:2px solid #c13339;
}
The default and error states are shown here:
默认状态和错误状态如下所示：
回答by moribvndvs
You can apply styles using the SELECT selector or applying a classname to a SELECT element. However, you'll run into issues with IE < 8 applying things like borders to the element.
您可以使用 SELECT 选择器或将类名应用于 SELECT 元素来应用样式。但是，您会遇到 IE < 8 将边框之类的内容应用于元素的问题。
You can then target options by using the OPTION selector.
然后，您可以使用 OPTION 选择器来定位选项。
SELECT { border: solid 1px red; font-weight: bold; }
OPTION { background:green; font-style: italic; }
Should give you a drop down with a red border (if using FF or IE8 in Standards mode) with bold text, and the options should be italic with a green background.
应该给你一个带有红色边框的下拉菜单（如果在标准模式下使用 FF 或 IE8）和粗体文本，并且选项应该是带有绿色背景的斜体。
回答by Jaimal Chohan
Its possible, but convoluted to say the least. You can't actually style the drop down portion of a drop down list consistantly across different browsers as they all support them in different ways (I mean really varied support).
它可能，但至少可以说令人费解。您实际上无法在不同的浏览器中一致地设置下拉列表的下拉部分的样式，因为它们都以不同的方式支持它们（我的意思是真正不同的支持）。
When I had a problam like this a few months ago, the only solution I found was to, using javascript, convert the drop down list into a ul/li drop down menu, which I could style. Of course there are numerous event that need handling, like selecting a value.
几个月前，当我遇到这样的问题时，我找到的唯一解决方案是使用 javascript 将下拉列表转换为 ul/li 下拉菜单，我可以设置样式。当然，有许多事件需要处理，比如选择一个值。
Luckly there's a plugin for JQuery that allows this be a trivial task. (The given Brainfault link for this plugin isn't working anymore.)
幸运的是，有一个 JQuery 插件可以让这成为一项微不足道的任务。（此插件的给定 Brainfault 链接不再有效。）
回答by h3lL0W0RLd
Check out this website for CSS only solution: http://www.htmllion.com/default-select-dropdown-style-just-css.html
查看此网站以获取仅 CSS 的解决方案：http: //www.htmllion.com/default-select-dropdown-style-just-css.html
HTML:
HTML：
<form>
<select>
<option>CSS</option>
<option>HTML </option>
<option>HTML 5</option>
</select>
</form>
CSS:
CSS：
<style>
select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
background: #0088cc url(img/select-arrow.png) no-repeat 90% center;
width: 100px; /*Width of select dropdown to give space for arrow image*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/
color: #FFF;
border-radius: 15px;
padding: 5px;
box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
}
</style>
回答by Andrew Mao
Since this question was asked, browser technology has far improved. You can now create a custom dropdown menu entirely using CSS with no javascript.
自从问了这个问题，浏览器技术有了很大的进步。您现在可以完全使用 CSS 创建自定义下拉菜单，无需 javascript。
Check out this blog post: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
查看这篇博文：http: //line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
回答by Eric J Tischler
I have dropdowns in my cart that were light gray if not selected. I was able to turn the text black with this:
如果未选中，我的购物车中有一些下拉菜单为浅灰色。我可以用这个把文字变成黑色：
#customer_details ul {
color: black !important;
}
That was all I needed to change, so I can't say what else you could do.
这就是我需要改变的全部，所以我不能说你还能做什么。
