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

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 应用到背景标签，因此您不会获得蓝色背景。尝试让我知道这是否有效。