下拉背景箭头对齐

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; 
}