1. 程式人生 > >select默認下拉箭頭改變、option樣式清除

select默認下拉箭頭改變、option樣式清除

-a lec expand 問題 AD :hover 谷歌 chrom 簡單的

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

select默認下拉箭頭改變、option樣式清除