Reputation: 214
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/
Upvotes: 6
Views: 15626
Reputation: 9
Bootstrap use 'background-image' for the dropdown arrow. So simply change the background image.
.form-select{
background-image:url(....);
}
Upvotes: -1
Reputation: 133
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/
Upvotes: 3