是否有CSS唯一的方式来设置＜select＞下拉列表的样式？
我需要尽可能人性化地设置＜select＞表单的样式，而不需要任何JavaScript。在CSS中，我可以使用哪些财产来执行此操作？
此代码需要与所有主要浏览器兼容：
Internet Explorer 6、7和8Firefox浏览器游猎
我知道我可以用JavaScript实现：示例。
我说的不是简单的造型。我想知道，我们只能用CSS做什么。
我在Stack Overflow上发现了类似的问题。
还有Doctype.com上的这个。
当前回答
使用clip属性裁剪选择元素的边框和箭头，然后将自己的替换样式添加到包装中：
<!DOCTYPE html><html><head><style>选择｛位置：绝对；剪辑：矩形（2px 49px 19px 2px）；z索引：2；｝body＞span｛display：块；位置：相对；宽度：64px；高度：21px；边框：2px纯绿色；背景：url(http://www.stackoverflow.com/favicon.ico)右1px不重复；}</style></head><span><选择><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择></span></html>
使用不透明度为零的第二次选择使按钮可单击：
<!DOCTYPE html><html><head><style>#实{位置：绝对；剪辑：矩形（2px 51px 19px 2px）；z索引：2；}#假｛位置：绝对；不透明度：0；｝body>span｛display：块；位置：相对；宽度：64px；高度：21px；背景：url(http://www.stackoverflow.com/favicon.ico)右1px不重复；}</style></head><span><select id=“real”><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择><select id=“fake”><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择></span></html>
Webkit和其他浏览器的坐标不同，但@media查询可以涵盖这一点。
工具书类
Dojo FX测试：dojox.FX.ext-Dojo.complexCSS掩码：使用rect函数测试剪辑属性，并自动将值剪辑到边框框
其他回答
在现代浏览器中，在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 {
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;}
＜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;
}
label {
position: relative;
display: inline-block;
}
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 150px;
outline: none;
color: black;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: lightblue;
}
这对选定的元素使用了背景色，我删除了图像。。
这是一个适用于所有现代浏览器的版本。关键是使用外观：无，这将删除默认格式。由于所有的格式都不存在了，您必须重新添加箭头，以在视觉上区分选择和输入。
工作示例：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></选择>
