我想更改下拉列表箭頭的默認(rèn)外觀，以便在瀏覽器中看起來相同。有沒有一種方法可以使用CSS或其他方式覆蓋下拉箭頭的默認(rèn)外觀？
3 回答
慕桂英546537
TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超10個(gè)贊
您可以使用CSS來實(shí)現(xiàn)此目的，但是您并沒有在技術(shù)上更改箭頭本身。
在此示例中，我實(shí)際上是隱藏默認(rèn)箭頭，而是顯示自己的箭頭。
.styleSelect select {
background: transparent;
width: 168px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #000;
}
.styleSelect {
width: 140px;
height: 34px;
overflow: hidden;
background: url("images/downArrow.png") no-repeat right #fff;
border: 2px solid #000;
}
<div class="styleSelect">
<select class="units">
<option value="Metres">Metres</option>
<option value="Feet">Feet</option>
<option value="Fathoms">Fathoms</option>
</select>
添加回答
舉報(bào)
0/150
提交
取消