在使用html的select標籤的時候,可能我們會覺得原有的樣式比較醜,想把它變的美觀一點,那麼這裏有兩種方法。
1.方法一:
原理:將瀏覽器默認的下拉框樣式清除,然後應用上自己的,再附一張向右對齊小箭頭的圖片即可。
<span style="font-family:KaiTi_GB2312;font-size:14px;">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; }</span></span>
2.方法二:
原理:爲其添加一個父容器,容器是用來覆蓋小箭頭的,然後爲select添加一個向右的小偏移或者寬度大於父級元素。設置父級的CSS屬性爲超出部分不可見,即可覆蓋即小箭頭。然後再爲父級容器添加背景圖片即可。overflow: hidden並不能隱藏下拉框的顯示。
注:舊版IE多用此方法。因爲 IE8/9並不支持 appearance:none CSS屬性。
示例代碼:
html頁:
<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>
css樣式:
<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>