Style the first select option in Bootstrap 3

Question

I'm trying to change font color of the first select option which has Bootstrap's form-control class as follows:

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

I tried styling it using the first-child attribute as follows, but it colors everything in red:

select.form-control { color: red; }
select.form-control option { color: black; }
select.form-control option:first-child { color: red; }

I even tried styling it inline, but it is still unable to override Bootstrap's css:

<select class="form-control">
  <option style="color: red;" color="red">1</option>
  <option>2</option>
  <option>3</option>
</select>

Interestingly, the css correctly styles the first element when it's a multiple style, but that's not what I need:

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Here's a codepen reproducing this: http://codepen.io/anon/pen/MKjYjq

UPDATE 1:

By first element I mean the first option within select (i.e. <option>1</option>). I'd like it to be red, and the rest black.

Unlike some comments reported with the original Codepen, even the inline approach doesn't work for me in Chrome 47, Safari 9 and Firefox 42 on Mac:

The desired option is where number 2 in the image above (along with other options below it) is black, but option 1 is red.

It looks to be working as you describe! what are you asking for? — Adam Buchanan Smith, Dec 23 '15 at 18:49
Please explain to me how this is not what you want? https://jsfiddle.net/oa9wj80x/1/ — Adam Buchanan Smith, Dec 23 '15 at 18:51
yes I just change `select.form-control { color: red; }` to `select.form-control { color: blue; }` and it is working. — copser, Dec 23 '15 at 18:52
@AdamBuchananSmith maybe it's browser dependent? All the options are black when I bring that fiddle up in Safari. And Chrome. And Firefox. — Craine, Dec 23 '15 at 18:58
@AdamBuchananSmith Chrome for Mac 47.0.2526, and Firefox Dev edition for Mac 44.0a2. — Craine, Dec 23 '15 at 19:07
@AdamBuchananSmith Definitely am. Screenshots for Safari and FF, respectively: https://www.runtondev.com/wp-content/uploads/2015/12/Safari-dropped-selected.png https://www.runtondev.com/wp-content/uploads/2015/12/Firefox-dropped-selected.png — Craine, Dec 23 '15 at 19:16
@Craine get a new computer lol, black and white screens are outdated... — Adam Buchanan Smith, Dec 23 '15 at 19:18
What do you mean by the first element and what browser are you using to check that behaviour? — Olga, Dec 23 '15 at 19:21
@AdamBuchananSmith what versions of FF and Chrome are you using? — Craine, Dec 23 '15 at 19:24
I am deleting my previous comments, this is getting ridiculous — Adam Buchanan Smith, Dec 23 '15 at 19:29
Correct me if I am wrong you want it to be red both in "dropdown" and in "input" but only this particular option, not the other ones? And you want to accomplish this using css? — Olga, Dec 23 '15 at 20:07
@Olga I'd like it to be red only in the "input" once selected. JS solution is fine too, but I'd prefer css. — Sbbs, Dec 23 '15 at 20:09

score 3 · Accepted Answer · answered Dec 23 '15 at 20:41

Javascript based solution (http://codepen.io/anon/pen/ZQpGpY)

Markup:

<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

Css:

select.form-control.first-option-selected {
  color: red;
}

select.form-control > option {
  color: black;
}

Javascript (jQuery is used for convinience):

$(function () {
  var selectElement = $('select.form-control');

  function ifFirstOptionSelectedMakeItRed() {
    if (selectElement[0].selectedIndex === 0) {
      selectElement.addClass('first-option-selected');
    } else {
      selectElement.removeClass('first-option-selected');
    }
  }

  ifFirstOptionSelectedMakeItRed();

  selectElement.on('change', function () {
    ifFirstOptionSelectedMakeItRed();
  })
});

My reasoning for this solution is this:

I don't think you can check which option is selected via css. My first idea was to use attributes selector. But I couldn't find any usefull attributes in documentation for this element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
Nor for the option element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
So being a lame css'er I turned to js - and everything is pretty simple there https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement you have all sorts of properties to check against. I ended up using selectedIndex. And there is a change event for when user chooses a new option. https://developer.mozilla.org/en-US/docs/Web/Events/change

Best solution, since doesn't rely on the values of options. – Sbbs Dec 23 '15 at 22:02 — Sbbs, Dec 23 '15 at 22:02

Adam Buchanan Smith · Answer 2 · 2015-12-23T21:25:14.967

2

This is right from your own code: https://jsfiddle.net/oa9wj80x/2/

If that is not exactly what you are asking then IDK lol

<select class="form-control">
  <option style="color: red;">1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

edit 1

or are you looking for this effect? https://jsfiddle.net/oa9wj80x/3/

edit2

I think this is what you are trying to do? https://jsfiddle.net/oa9wj80x/5/

<select id="slct" onchange="change()" class="form-control">
  <option id="opt1" value="1">1</option>
  <option id="opt2" value="2">2</option>
  <option id="opt3" value="3">3</option>
  <option id="opt4" value="4">4</option>
  <option id="opt5" value="5">5</option>
</select>
<script>
function change(){
    var x = document.getElementById("slct").value;

  if(x > 1){
    document.getElementById("slct").style.color = "black";
  }
  else{
    document.getElementById("slct").style.color = "red";
  }
}
</script>

edited Dec 23 '15 at 21:25

answered Dec 23 '15 at 18:53

Adam Buchanan Smith

9,422
5
19
39

unfortunately your solution still doesn't work on my mac in latest Chrome 47, Safari 9 and Firefox 42 on Mac. In your first jsfiddle all options render as black, and in the second jsfiddle all options are black. The desired behaviour is where only option 1 is red and rest is black. I can provide a screenshot if you'd like. – Sbbs Dec 23 '15 at 20:06
@SBBS Thanks for clarifying, i will adjust my answer now – Adam Buchanan Smith Dec 23 '15 at 21:06
@SBBS look at **edit 2** Is that what you are looking for? – Adam Buchanan Smith Dec 23 '15 at 21:25
1

LOL I was soo confused :) good to see we got it to work... finally – Adam Buchanan Smith Dec 23 '15 at 21:59

score 0 · Answer 3 · answered Dec 23 '15 at 18:54

0

<p>Even inline doesn't work:</p>
<select class="form-control">
  <option style="color:red;">1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

This is works without any css changes.

answered Dec 23 '15 at 18:54

LetsSeo

875
7
20

unfortunately your solution doesn't work on my mac in latest Chrome 47, Safari 9 and Firefox 42 on Mac. All options render as black while the desired behaviour is where only option 1 is red and rest is black. I can provide a screenshot if you'd like. – Sbbs Dec 23 '15 at 20:08

score 0 · Answer 4 · edited May 23 '17 at 10:31

Having browsed around I found a css-only solution that works in modern browsers:

select:required:invalid {
  color: red;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

HTML

<select required class="form-control">
  <option value="" disabled selected>1</option>
  <option value="1">2</option>
  <option value="2">3</option>
</select>

Source: https://stackoverflow.com/a/29806043

Style the first select option in Bootstrap 3

4 Answers4