谷歌、火狐、ie下 select 的默认下拉箭头图标差别还是比较大,一般我们都会清除默认样式,重新设计箭头图标;
/* --ie清除--*/ select::-ms-expand{ display: none; } /* --火狐、谷歌清除--*/ select{
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background: url("arrow.png") no-repeat scroll right center transparent;
padding-right: 14px;
}
/* --箭头就用自己设计的箭头,padding 空出箭头的位置--*/
option样式的简单清除
option::-ms-expand{ display: none; }
option{
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari 和 Chrome */
appearance:none;
}
/* --背景色字体颜色--*/
option:hover{
color:#fff;
background-color:#1E90FF;
}
//这些可以简单的解决一些问题,如果要求美观,就用ul,li等写吧,option很多属性样式不好控制;