在IE瀏覽器下,下拉框的樣式是無法直接通過CSS來改變的。我們可以使用一些特殊的CSS屬性和hack來實現下拉框樣式的改變。
以下是一個簡單的例子:
<select class="dropdown"> <option value="1">選項一</option> <option value="2">選項二</option> <option value="3">選項三</option> </select>
.dropdown { width: 150px; height: 30px; border: 1px solid #ddd; padding: 5px; font-size: 14px; -webkit-appearance: none; /* 去掉瀏覽器默認樣式 */ -moz-appearance: none; appearance: none; background: url('arrow.png') no-repeat right center; /* 添加下拉箭頭圖標 */ } .dropdown::-ms-expand { display: none; /* 去掉IE下拉框自帶箭頭 */ }
在上面的例子中,我們給下拉框添加了類名為“dropdown”的樣式,并使用了一些特殊的CSS屬性及hack。其中,-webkit-appearance、-moz-appearance和appearance屬性用來去掉瀏覽器的默認樣式,使得下拉框可以根據我們自己的樣式來顯示。而在IE瀏覽器中,我們還需要使用.dropdown::-ms-expand屬性和值來去掉下拉框自帶的箭頭,然后再通過background屬性給下拉框添加一個自定義的箭頭圖標。
總的來說,雖然在IE瀏覽器下,改變下拉框的樣式比較麻煩,但還是可以通過一些技巧來實現的。
下一篇id與css的區別