有没有CSS唯一的方法来设计<select>下拉列表？
我需要尽可能多地设置<select>表单的样式，而不需要任何JavaScript.在CSS中可以使用哪些属性来执行此操作？
此代码需要与所有主要浏览器兼容:
我知道我可以用JavaScript:Example实现.
我说的不是简单的造型.我想知道，我们能做的最好的只有CSS.
I found similar questions on Stack Overflow.
Doctype上有this one个.通用域名格式.
以下是三种解决方案:
解决方案#1-外观:无-使用Internet Explorer 10-11解决方案(Demo)
--
要隐藏SELECT元素上的默认箭头集appearance: none，请使用background-image添加您自己的自定义箭头
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Browser Support:
appearance: none有很好的浏览器支持(caniuse)-除了Internet Explorer.
我们可以改进这项技术，并通过添加
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
如果Internet Explorer 9是一个问题，我们无法删除默认箭头(这意味着我们现在将有两个箭头)，但是，我们可以使用一个时髦的Internet Explorer 9 Select 器.
要至少undo撤消我们的自定义箭头-保留默认 Select 箭头不变.
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(https://stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>这个解决方案很简单，并且有很好的浏览器支持-通常应该足够了.
如果需要Internet Explorer的浏览器支持，请提前阅读.
解决方案#2截断 Select 元素以隐藏默认箭头(demo)
--
用fixed width和overflow:hidden将select元素包装在一个div中.
然后给select元素一个大约20 pixels greater than the div的宽度.
结果是select元素的默认下拉箭头将被隐藏(由于容器上有overflow:hidden)，您可以将任何想要的背景图像放置在div的右侧.
这种方法的优点是它是跨浏览器的(Internet Explorer 8和更高版本、WebKit和Gecko).然而，这种方法的优点是选项下拉列表在右边突出(我们隐藏了20个像素，因为选项元素的宽度与 Select 元素相同).
[然而，应该注意的是，如果定制 Select 元素仅对mobile台设备是必需的，那么上述问题不适用，因为每部手机本机打开 Select 元素的方式.因此对于移动设备，这可能是最好的解决方案.]
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(https://stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>如果Firefox在Version 35之前需要自定义箭头，但不需要支持旧版本的Internet Explorer，请继续阅读...
解决方案3-使用pointer-events属性(demo)
--
这里的 idea 是将一个元素覆盖在本机下拉箭头上(创建我们的自定义箭头)，然后禁止在其上发生指针事件.
Advantage:它在WebKit和Gecko中运行良好.它看起来也不错(没有突出option个元素).
Disadvantage: Internet Explorer(Internet Explorer 10及以下版本)不支持pointer-events，这意味着您无法单击自定义箭头.此外，这种方法的另一个(明显的)缺点是，你不能用悬停效果或手形光标瞄准新的箭头图像，因为我们刚刚禁用了它们上的指针事件！
不过，使用此方法，您可以使用现代器或条件注释来使Internet Explorer恢复到内置箭头的标准.
由于Internet Explorer 10不再支持conditional comments，因此NB:不再支持conditional comments:如果您想使用这种方法，您可能应该使用Modernizr.然而，仍然可以用描述here的CSS黑客将指针事件CSS从Internet Explorer 10中排除.
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646E;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #DDD8DC;
background: #FFF;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(https://stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->