谷歌、火狐、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很多屬性樣式不好控制;
