如何更改選擇框箭頭，當其具有背景顏色

Question

我有一個選擇框樣式與這樣的CSS。

我的風格

select { 
    background-color: #b9def8; 
    border: none; 
    border-radius: 2px; 
    width: 260px; 
    height: 60px; 
    padding-left: 10px; 
    font-size: 16px; 
    color: #676863; 
    background: url('../img/arrow-dropdown.png') no-repeat right #ddd; 
    -webkit-appearance: none; 
} 

但隨着上面款式，正常選擇框變成這樣一個選擇框。

現在我該怎麼辦？謝謝。

Answer 1

你已經提到你的PNG是一個藍色的箭頭。因此，如果您希望獲得藍色背景的選擇框，請更改背景標記中的顏色。

background: url('../img/arrow-dropdown.png') no-repeat right #ddd; 

到

background: url('../img/arrow-dropdown.png') no-repeat right #b9def8; 

記住在你的風格的最後一個規則是在選擇一個和你既然已經申請#ddd到你的背景標籤，你沒有得到的藍色背景。嘗試讓我知道這是否有效。