我想更改下拉列表箭頭的默認外觀，以便在瀏覽器中看起來相同。有沒有一種方法可以使用CSS或其他方式覆蓋下拉箭頭的默認外觀？
3 回答
慕桂英546537
TA貢獻1848條經驗 獲得超10個贊
您可以使用CSS來實現此目的，但是您并沒有在技術上更改箭頭本身。
在此示例中，我實際上是隱藏默認箭頭，而是顯示自己的箭頭。
.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>
- 3 回答
- 0 關注
- 633 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消