Bootstrap 3: Custom color for select dropdown arrow

Question

I would like to change the color of the dropdown arrow in a Bootstrap 3 dropdown select.

Here's my CSS so far, I already changed the background, border, font and option colors, but have had no luck with the arrow yet:

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/

Answer 1

You want to change the color of the down arrow in the dropdown? As far as I know, this arrow is coded like that :

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

So if you want to change the color of this, you just have to add the color property :

.caret{ color: red; }

Update

Here's a JSFiddle to illustrate : https://jsfiddle.net/valentinho14/tkfa0ddp/