下拉背景箭頭對齊

Question

我已經爲html中的select分配了背景圖像。圖像只是一個箭頭。 我的代碼是：

select { 
    font-style: normal; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -appearance: none; 
    background: url("/icons/dropdown_arrow.png") 135px center; 
    background-repeat: no-repeat; 
    border: 1px solid #cacaca; 
    padding: 10px; 
    width: 156px; 
    border-radius: 4px; } 

箭頭非常接近下出現的下降結束。

是否有移動的陣列通過向左說20像素，這樣的下拉看起來更好的方式。

我試着添加padding-left：150px，但是它隱藏了select中的選項，當下拉菜單處於關閉狀態時。

Answer 1

對於那些面臨這樣的問題，解決之道在於選擇元素的屬性背景位置。我調整了它，並能夠將箭頭移動到期望的位置

Answer 2

降低您的背景圖像的left位置：

select { 
    font-style: normal; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -appearance: none; 

    background: url("/icons/dropdown_arrow.png") 115px center; 
    /*----------------------------------------here-^^^-----------*/ 

    background-repeat: no-repeat; 
    border: 1px solid #cacaca; 
    padding: 10px; 
    width: 156px; 
    border-radius: 4px; 
}