css修改selec下拉菜单样式-01-19 15:00
修改select下拉菜单样式其实可以使用javascript来操作，这样更方便。
但有些人并不喜欢，想用单纯的css来控制。
以下有三种解决方案，看看哪一个合适。
解决方案1 外观：无 - 与ie10-11解决方法
要隐藏appearance: none选择元素上设置的默认箭头，请添加您自己的自定义箭头background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* remove default arrow */
background-image: url(...); /* add custom arrow */
}
浏览器支持：
appearance: none有非常好的浏览器支持ie11和firefox34除外
我们可以通过增加这个技术来增加对ie10和ie11的支持
select::-ms-expand {
display: none; /* hide the default arrow in ie10 and ie11 */
}
如果是ie9，那又是一个问题，我们没有办法去除默认箭头(这意味着我们现在有两个箭头)。
但是，我们可以使用时髦的ie9选择器来至少撤销我们的自定义箭头——保留默认选择箭头。
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
完整代码如下： html代码
select {
margin: 50px;
border: 1px solid #111;
background: transparent;
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(/favicon.ico) 96% / 15% no-repeat #eee;
}
/* CAUTION: IE hackery ahead */
select::-ms-expand {
display: none; /* remove default arrow in IE 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;
}
}
Apples
Pineapples
Chocklate
Pancakes
这个解决方案很简单，并且具有良好的浏览器支持，通常到这个地步应该足够了。
如果浏览器支持IE9和Firefox 34是必要的，那么继续往下看。
解决方案2 截断select元素以隐藏默认箭头
将select用一个div元素包裹起来，给一个固定的宽度和高度，并使用overflow:hidden。
然后将select元素的宽度设为比div大20个像素。
结果是select元素的默认下拉箭头将被隐藏(归因于overflow:hidden容器上)，并且可以在div的右侧放置任何想要的背景图像。
这种方法的优点是它是跨浏览器(Internet Explorer 8及更高版本，WebKit和Gecko)。
然而，这种方法的缺点是选项下拉列表在右侧(通过我们隐藏的20个像素...因为选项元素占据了选择元素的宽度)。
但是，应该注意的是，如果自定义选择元素仅用于移动设备，则上述问题不适用 。
完整代码如下： html代码
.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(/favicon.ico) 96% / 20% no-repeat #eee;
}
Pineapples
Apples
Chocklate
Pancakes
如果自定义箭头一定要用在firefox上面，并且在在35版本之前，但是您又不需要支持IE的旧版本，那么请继续往下看。
解决方案3 使用pointer-events属性
这里的想法是在本地下拉箭头上覆盖一个元素(来创建我们自定义的元素)，然后禁止它上面的指针事件。
优点：适用于WebKit和Gecko。它看起来也不错(没有突出的option元素)
缺点：Internet Explorer(IE10和以下)不支持pointer-events，这意味着你不能点击自定义箭头。
此外，这种方法的另一个(显而易见的)缺点是，您不能使用悬停效果或手形光标来定位您的新箭头图像，因为我们刚刚禁用了指针事件！
完整代码如下： html代码
.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(/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;
}
}
Apples
Pineapples
Chocklate
Pancakes
但是，使用此方法，您可以使用Modernizer或条件注释使Internet Explorer恢复为标准内置箭头。
注意：因为Internet Explorer 10不再支持conditional comments：如果你想使用这种方法，你应该使用Modernizr。
但是，仍然可以使用这里描述的CSS hack从Internet Explorer 10中排除指针事件CSS。
