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

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应用于背景标记，因此您没有获得蓝色背景。如果有效，请试着告诉我。