Bootstrap 3：自定义下拉菜单箭头的颜色

Question

我想要改变Bootstrap 3下拉选择框中下拉箭头的颜色。

以下是我已经编写好的CSS代码，我已经改变了背景、边框、字体和选项颜色，但是还没有成功更改箭头的颜色：

select{
  background-color: #555;
  color: white;
  border: 1px solid #ffffff;
}
select:after {
  color: white !important;
}
option:checked {
  background-color: #eee;
  color:#555;
}
option:not(:checked) {
  background-color: white;
  color:#000;
}

Fiddle: http://jsfiddle.net/ju3n1dnk/

- awawjerh

---

你能创建一个演示fiddle吗？ - G.L.P

@Etash 这是 Fiddle 的链接：http://jsfiddle.net/ju3n1dnk/ - awawjerh

你试过访问http://uplifted.net/programming/change-default-select-dropdown-style-just-css/吗？ - G.L.P

https://dev59.com/1XRB5IYBdhLWcg3weHLx - rails_has_elegance

你可以在这里找到解决方案：https://dev59.com/X2ox5IYBdhLWcg3wQSEO - Ccs

Answer 1

你想改变下拉菜单中向下箭头的颜色吗？据我所知，这个箭头是这样编码的：

<span class="caret"></span>

如果你想改变这个元素的颜色，只需添加一个color属性：

.caret{ color: red; }

更新

这里有一个JSFiddle以说明：https://jsfiddle.net/valentinho14/tkfa0ddp/

- Riverside

Answer 2

只需更新选择器的颜色

select {
    color:#fff;
}

- iWasCloud

Answer 3

Bootstrap在下拉箭头中使用了'background-image'属性，因此只需更改背景图像即可。

.form-select{
background-image:url(....);
}

- Satyam

---

这可能适用于Bootstrap的后续版本，但不适用于Bootstrap 3。 - undefined