如何用css替換<select>元素上的箭頭按鈕？

Question

嘗試使用圖像爲下拉箭頭設置表單上的select元素的樣式。不知道這是否可能。

Answer 1

這種風格添加到您的

.styled-select { 
    background: url(new_arrow.png) no-repeat right #fff; 
} 

來源：http://bavotasan.com/2011/style-select-box-using-only-css/

Answer 2

樣式它與CSS和使用指針事件：

<label> 
<select> 
    <option value="0">Zero</option> 
    <option value="1">One</option> 
</select> 
</label> 

，相對CSS是

label:after { 
    content:'\25BC'; 
    display:inline-block; 
    color:#000; 
    background-color:#fff; 
    margin-left:-17px; /* remove the damn :after space */ 
    pointer-events:none; /* let the click pass trough */ 
} 

如果你想使用圖像背景塊，我只是在這裏使用向下的箭頭。這是一個難看的小提琴樣品：https://jsfiddle.net/1rofzz89/