select默認下拉箭頭改變、option樣式清除
阿新 • • 發佈:2018-06-23
-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樣式清除