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.

Answer 1

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

Answer 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>

Answer 3

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

Answer 4

<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.