是否有CSS唯一的方式来设置＜select＞下拉列表的样式？
我需要尽可能人性化地设置＜select＞表单的样式，而不需要任何JavaScript。在CSS中，我可以使用哪些财产来执行此操作？
此代码需要与所有主要浏览器兼容：
Internet Explorer 6、7和8Firefox浏览器游猎
我知道我可以用JavaScript实现：示例。
我说的不是简单的造型。我想知道，我们只能用CSS做什么。
我在Stack Overflow上发现了类似的问题。
还有Doctype.com上的这个。
当前回答
＜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;
}
其他回答
＜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;
}
在设置选择下拉列表样式时，我注意到的最大的不一致是Safari和Google Chrome渲染（Firefox可以通过CSS完全自定义）。在互联网的黑暗深处进行了一些搜索后，我发现了以下内容，这几乎完全解决了我对WebKit的疑虑：
Safari和Google Chrome修复程序：
select {
-webkit-appearance: none;
}
但是，这会删除下拉箭头。您可以使用带有背景、负边距或绝对位于select下拉列表上方的附近div添加下拉箭头。
*CSS属性：-webkit外观中提供了更多信息和其他变量。
纯交叉浏览器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;
}
select {
outline: 0;
overflow: hidden;
height: 30px;
background: #2c343c;
color: #747a80;
border: #2c343c;
padding: 5px 3px 5px 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 10px;
}
select option {border: 1px solid #000; background: #010;}
这是一个适用于所有现代浏览器的版本。关键是使用外观：无，这将删除默认格式。由于所有的格式都不存在了，您必须重新添加箭头，以在视觉上区分选择和输入。
工作示例：https://jsfiddle.net/gs2q1c7p/
选择：不（[多个]）{-webkit外观：无；-moz外观：无；背景位置：右50%；背景重复：无重复；背景图像：url（数据：image/png；base64，iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRR vYmU6bnM6bWV0YS8IIHg6eG1wdGs9IkFkb2JlIFhNUCBDB3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbeG1wPSJodHwOi8 vbnMuYWRvYmUuY29tL3hhcC8xLjAvIB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1spnM 6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9ZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtC5paWQ6NDZFNDEWNjlGNzFEMTFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9固有C5kaWQ6NDZFND EWNkFGNzFEMTFTFMkJEQ 0VDRTM10RCMz MyMkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZ WY6ZG9jdW1lbnJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAMAzNENEOH+do8AAAAAASUVORK5CYII=）；衬垫：.5cm；右侧填充：1.5em}#我的选择{边框半径：0}<select id=“mySelect”><option>选项1</option><option>选项2</option></选择>
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
