是否有CSS唯一的方式来设置＜select＞下拉列表的样式？
我需要尽可能人性化地设置＜select＞表单的样式，而不需要任何JavaScript。在CSS中，我可以使用哪些财产来执行此操作？
此代码需要与所有主要浏览器兼容：
Internet Explorer 6、7和8Firefox浏览器游猎
我知道我可以用JavaScript实现：示例。
我说的不是简单的造型。我想知道，我们只能用CSS做什么。
我在Stack Overflow上发现了类似的问题。
还有Doctype.com上的这个。
当前回答
纯交叉浏览器CSS选择控件样式
规则#1：切勿使用JAVASCRIPT来设置HTML元素的样式！
如果JS被禁用或阻止，CSS将崩溃并烧录。始终从纯CSS开始，然后在您喜欢的任何额外“脚本胶”上分层。记住<select>控件（如HTML中的所有表单字段）被替换为元素，这意味着设备上的浏览器和操作系统对控件的设计和布局具有一定的控制权。这就是为什么Windows、苹果和移动设备控件看起来都不同！这是有原因的。
不要用JavaScript或CSS黑客劫持控件设计，除非您觉得UI由于某种原因（如删除选择控件上的箭头）必须进行修改。下面的CSS不这样做。它接受了它可以在选择表单控件中重新设计的核心限制。我仍然会从我干净的CSS解决方案开始，然后在顶部覆盖任何自定义“黑客”。如果它们失败了，那么您的CSS将优雅地退回到一个始终适用于20多年浏览器的全局CSS设计。。。加上未来的！
下面的CSS代码跨浏览器（从1990年代到现在）工作，并将所有浏览器（过去和现在）与相同的基本CSS设计对齐。您可以根据需要自定义此代码。你可以在非常旧的浏览器中测试它，它应该给你一个与现代HTML5浏览器相匹配的外观和感觉，这应该一直是目标。
/* This CSS works in 20+ years of browsers without hacks, scripts, or tricks. */
body optgroup,
body optgroup:visited,
body optgroup:hover,
body optgroup:focus,
body optgroup:active {
margin: 0;
padding: 0;
font-style: inherit;
font-weight: bold;
cursor: pointer;
background: #fff;
border: none;
}
body optgroup:visited,
body optgroup:hover,
body optgroup:focus,
body optgroup:active {
background: #f9f9ff;
}
body option,
body option:visited,
body option:hover,
body option:focus,
body option:active {
margin: 0;
padding: 0;
cursor: pointer;
background: #fff;
border: none;
}
body option:visited,
body option:hover,
body option:focus,
body option:active {
background: #f9f9ff;
}
body select,
body select:visited,
body select:hover,
body select:focus,
body select:active {
display: inline-block;
width: auto;
height: auto;
min-width: 0;
max-width: none;
padding: .17em .17em;
margin: 0;
text-transform: none;
border-radius: .2em;
border: 2px solid #bbb;
background: #fff;
cursor: pointer;
-webkit-appearance: listbox;
-moz-appearance: listbox;
line-height: normal;
}
body select:visited,
body select:hover,
body select:focus,
body select:active {
background: #f9f9ff;
border: 2px solid #999;
}
body select:focus {
background: #fff;
border: 2px solid #999;
}
body select:required:visited:valid,
body select:required:valid {
background: #fff;
border: 2px solid #7fbe96;
}
body select:required:hover:valid {
background: #f9f9ff;
border: 2px solid #278b3d;
}
body select:required:focus:valid {
background: #fff;
border: 2px solid #278b3d;
}
body select:required:visited:invalid,
body select:required:invalid {
background: #fff;
border: 2px solid #ff6565;
}
body select:required:hover:invalid {
background: #f9f9ff;
border: 2px solid #ce2f2f;
}
body select:required:focus:invalid {
background: #fff;
border: 2px solid #ce2f2f;
}
body select[disabled],
body select[readonly],
body select[disabled="disabled"],
body select[readonly="readonly"],
body select[disabled]:visited,
body select[readonly]:visited,
body select[disabled="disabled"]:visited,
body select[readonly="readonly"]:visited,
body select[disabled]:hover,
body select[readonly]:hover,
body select[disabled="disabled"]:hover,
body select[readonly="readonly"]:hover,
body select[disabled]:focus,
body select[readonly]:focus,
body select[disabled="disabled"]:focus,
body select[readonly="readonly"]:focus,
body select[disabled]:active,
body select[readonly]:active,
body select[disabled="disabled"]:active,
body select[readonly="readonly"]:active {
border: 2px solid #bbb;
background: #f0f0f0;
color: #999;
cursor: default !important;
}
其他回答
一个使用：after和：before来完成这个技巧的非常好的例子是在使用CSS3 | CSSDeck设置选择框的样式中
＜select＞标签可以通过CSS进行样式设置，就像在浏览器中呈现的HTML页面上的任何其他HTML元素一样。下面是一个（过于简单）的示例，它将在页面上放置一个select元素，并将选项的文本呈现为蓝色。
示例HTML文件（选择Example.HTML）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>
示例CSS文件（selectExample.CSS）：
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
在现代浏览器中，在CSS中设置＜select＞的样式相对轻松。外观方面：唯一棘手的部分是替换箭头（如果你想要的话）。下面是一个使用内联data:URI和纯文本SVG的解决方案：
选择{-moz外观：无；-webkit外观：无；外观：无；背景重复：无重复；背景尺寸：0.5em自动；背景位置：右0.25em中心；右侧填充：1em；backgroundimage:url（“data:image/svg+xml；charset=utf-8\<svg xmlns='http://www.w3.org/2000/svg'viewBox='0 0 60 40'>\<多边形点=',0 60,0 30,40'style='fill:black；'/>\</svg>“）；}<选择><option>选项1</option><option>选项2</option></选择><select style=“font-size:2rem；”><option>选项1</option><option>选项2</option></选择>
其余的样式（边框、填充、颜色等）相当简单。
这适用于我刚刚尝试过的所有浏览器（Firefox 50、Chrome 55、Edge 38和Safari 10）。关于Firefox的一个注意事项是，如果你想在数据URI中使用#字符（例如，fill:#000），你需要转义它（fill:%23000）。
select元素及其下拉功能很难设置样式。
Chris Heilmann的select元素的风格属性证实了Ryan Dohery对第一个答案的评论：
“select元素是操作系统，而不是浏览器chrome。因此风格不可靠，尝试也不一定有意义无论如何"
你肯定应该像CSS中的样式选择、optgroup和选项那样做。在许多方面，背景色和颜色只是您通常需要的样式选项，而不是整个选择。
