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/

did you tried http://uplifted.net/programming/change-default-select-dropdown-style-just-css/? — G.L.P, Mar 09 '15 at 10:50
http://stackoverflow.com/questions/611482/change-color-and-appearance-of-drop-down-arrow — rails_has_elegance, Mar 09 '15 at 10:52
You can find a solution here: http://stackoverflow.com/questions/9329044/change-the-color-of-the-upward-arrow-on-an-open-dropdown-menu — Ccs, Dec 18 '15 at 15:32

Riverside · Answer 1 · 2016-04-19T12:05:07.277

3

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/

edited Apr 19 '16 at 12:05

answered Apr 19 '16 at 11:59

Riverside

133
1
4
11

score 0 · Answer 2 · answered Feb 27 '22 at 11:44

0

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

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

answered Feb 27 '22 at 11:44

Satyam

11
3

score -1 · Answer 3 · answered Oct 08 '17 at 03:43

-1

just update color for select

select {
    color:#fff;
}

answered Oct 08 '17 at 03:43

iWasCloud

107
2
13

Bootstrap 3: Custom color for select dropdown arrow

3 Answers3