關於select下拉框樣式修改問題
阿新 • • 發佈:2019-01-28
下拉的箭頭一般是瀏覽器預設的,但是有時候會感覺它很醜或者與實際想要的箭頭效果不一樣。百度總結幾種方法。
1.將瀏覽器預設的下拉框樣式清除,然後應用上自己的,再附一張向右對齊小箭頭的圖片即可。
select {
/*Chrome和Firefox裡面的邊框是不一樣的,所以複寫了一下*/
border: solid 1px #000;
/*很關鍵:將預設的select選擇框樣式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在選擇框的最右側中間顯示小箭頭圖片*/
background: url("http://ourjs.github.io/static/2015/arrow.png" ) no-repeat scroll right center transparent;
/*為下拉小箭頭留出一點位置,避免被文字覆蓋*/
padding-right: 14px;
}
/*清除ie的預設選擇框樣式清除,隱藏下拉箭頭*/
select::-ms-expand { display: none; }
2.為其新增一個父容器,容器是用來覆蓋小箭頭的,然後為select新增一個向右的小偏移或者寬度大於父級元素。設定父級的CSS屬性為超出部分不可見,即可覆蓋即小箭頭。然後再為父級容器新增背景圖片即可。overflow: hidden並不能隱藏下拉框的顯示。舊版ie不支援appearance,一般是用的這種方法。
<span style="font-family:KaiTi_GB2312;font-size:14px;"><div id="parent">
<select>
<option>what</option>
<option>the</option>
<option>hell</option>
</select>
</div></span>
<span style="font-family:KaiTi_GB2312;font-size:14px;" > #parent {
background: url('yourimage') no-repeat;
width: 100px;
height: 30px;
overflow: hidden;
}
#parent select {
background: transparent;
border: none;
padding-left: 10px;
width: 120px;
height: 100%;
}</span>