是否有CSS唯一的方式来设置＜select＞下拉列表的样式？
我需要尽可能人性化地设置＜select＞表单的样式，而不需要任何JavaScript。在CSS中，我可以使用哪些财产来执行此操作？
此代码需要与所有主要浏览器兼容：
Internet Explorer 6、7和8Firefox浏览器游猎
我知道我可以用JavaScript实现：示例。
我说的不是简单的造型。我想知道，我们只能用CSS做什么。
我在Stack Overflow上发现了类似的问题。
还有Doctype.com上的这个。
当前回答
仅限CSS和HTML的解决方案
它似乎与Chrome、Firefox和Internet Explorer 11兼容。但请留下您对其他网络浏览器的反馈。
正如Danield的回答所建议的那样，我将我的选择包装在一个div中（甚至两个div用于x浏览器兼容性），以获得预期的行为。
看见http://jsfiddle.net/bjap2/
HTML格式：
<div class="sort-options-wrapper">
<div class="sort-options-wrapper-2">
<select class="sort-options">
<option value="choiceOne">choiceOne</option>
<option value="choiceOne">choiceThree</option>
<option value="choiceOne">choiceFour</option>
<option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
</select>
</div>
<div class="search-select-arrow-down"></div>
</div>
注意两个div包装器。
还请注意，添加了额外的div以将箭头向下按钮放置在您喜欢的位置（绝对位置），这里我们将其放在左侧。
CSS
.sort-options-wrapper {
display: inline-block;
position: relative;
border: 1px solid #83837F;
}
/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
overflow: hidden;
}
select {
margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
padding-left: 13px;
margin-left: 0;
border: none;
background: none;
/* margin-top & margin-bottom must be set since some
browsers have default values for select elements */
margin-bottom: 1px;
margin-top: 1px;
}
select:focus {
outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
position: absolute;
height: 10px;
width: 12px;
background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
left: 1px;
top: 5px;
}
其他回答
＜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;
}
这是可能的，但不幸的是，根据开发人员的要求，大多数情况下都是基于WebKit的浏览器。以下是通过内置开发人员工具检查器从Chrome选项面板收集的CSS样式示例，该检查器经过改进以匹配大多数现代浏览器中当前支持的CSS财产：
select {
-webkit-appearance: button;
-moz-appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-padding-end: 20px;
-moz-padding-end: 20px;
-webkit-padding-start: 2px;
-moz-padding-start: 2px;
background-color: #F07575; /* Fallback color if gradients are not supported */
background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */
background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer 10*/
background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
当您在基于WebKit的浏览器中的任何页面上运行此代码时，它应该更改选择框的外观，删除标准OS箭头并添加PNG箭头，在标签前后放置一些间距，几乎是您想要的任何内容。
最重要的部分是外观属性，它改变了元素的行为方式。
它在几乎所有基于WebKit的浏览器中都能完美工作，包括移动浏览器，尽管Gecko似乎不像WebKit那样支持外观。
您还可以向下拉列表中添加悬停样式。
选择｛position:relative；float:left；width:21.4%；height:34px；background:#f9f9e0；border:1px solid#41533f；padding:0px 10px 0px 10px；color:#41533f；margin:-10px 0px 0px 20px；backbackground:透明；字体大小：12px；-webkit外观：无；-moz外观：无(https://alt-fit.com/images/global/select-button.png)100%/15%无重复选择：悬停｛background:url(https://alt-fit.com/images/global/select-button.png)100%/15%无重复#fff；}<html><head></head><body><select name=“type”class=“select”><option style=“color:#41533f；”value=“select option”>选择选项</option><option value=“选项1”>选项1</option><option value=“option 2”>选项2</option><option value=“选项3”>选项3</option></选择></body></html>
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;}
本机解决方案
下面是一个简单的HTML/CSS示例：https://jsfiddle.net/dkellner/e1jdspvb/
诀窍：由于某种原因，当你给select标记一个size属性时，它会突然理解CSS。通常，此属性用于创建始终可见的固定高度列表，但作为一个副作用，您现在可以对其进行样式设置。因此，我们所做的只是给它一个大小，然后实现显示/隐藏机制，以返回下拉列表的感觉。
简约版，不像示例那样时尚，但更容易理解：
<style>
.stylish > span {position:relative;}
.stylish select {position:absolute;left:0px;transform:scaleY(0);transform-origin:top center;}
.stylish.dropped-down select {transform:scaleY(1);}
</style>
...
<div class="stylish">
<label> Choose your superhero: </label>
<span>
<input onclick = "this.closest('div').classList.toggle('dropped-down');"><br>
<select onclick = "this.closest('div').classList.remove('dropped-down');"
onchange = "this.closest('div').querySelector('input').value=this.value;"
size=9
>
<optgroup label="Fantasy"></optgroup>
<option value="gandalf"> Gandalf </option>
<option value="harry"> Harry Potter </option>
<option value="jon"> Jon Snow </option>
...
</select>
</span>
</div>
附加说明
这实际上实现了一个可编辑的下拉列表；使用只读以避免编辑＜optgroup＞标记是空的（不是围绕选项标记），这样更具风格
