CODEWITHSUNDEEP
csstwitter-bootstrap
awawjerh
awawjerh

Reputation: 214

Bootstrap 3: Custom color for select dropdown arrow

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

Answers (3)

Satyam
Satyam

Reputation: 9

Bootstrap use 'background-image' for the dropdown arrow. So simply change the background image.

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

Upvotes: -1

iWasCloud
iWasCloud

Reputation: 145

just update color for select

select {
    color:#fff;
}

Upvotes: -1

Riverside
Riverside

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

Related Questions