如何更改选择框箭头，当其具有背景颜色

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到你的背景标签，你没有得到的蓝色背景。尝试让我知道这是否有效。