css修改select的下拉箭頭的位置
阿新 • • 發佈:2018-12-21
修改select的樣式的基本操作如下
select {
/*Chrome和Firefox裡面的邊框是不一樣的,所以複寫了一下*/
border: solid 1px #000;
/*將預設的select選擇框樣式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在選擇框的最右側中間顯示小箭頭圖片*/
background: url(../img/ico-arrow.png) no-repeat scroll right center transparent;
/*為下拉小箭頭留出一點位置,避免被文字覆蓋*/
padding-right: 14px;
}
/*清除ie的預設選擇框樣式清除,隱藏下拉箭頭*/
select::-ms-expand { display: none; }
修改select下拉箭頭的位置
/*center right是絕對位置,如果要改變位置就得用相對位置x=95% y=50%*/
background:url(../img/ico-arrow.png) 95% 50% no-repeat scroll transparent;