How to style selected option color separately from disabled option

Question

I have a HTML dropdown select menu with first option is disabled. I would like to show that default disabled option in gray color, but once I selected another value, I would like this appear as blue. How can I achieve this ?

I managed to get the selected option appear as gray, and the selectable options to appear as blue in the list. But both disabled and not disables options will appear as gray anyway once they are selected :

select:not(:checked) {
  color: gray;
}
select option:not(:disabled){
  color: #000098;
}

Collaborate

I don't think this is what he was asking. – Pedometer

Answer 1

You can do that if you put required tag to select element.

HTML:

<select name="number" required>
  <option value="" disabled selected hidden>Placeholder</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

CSS:

select:required:invalid {
  color: gray;
}
select, option {
  color: blue;
}

https://jsfiddle.net/p63eg7d8/

Avrilavrit

it's a nice hack :) – Immortal

Answer 2

function check(){
 var ddl = document.getElementById("select");
 var selectedValue = ddl.options[ddl.selectedIndex].value;
    if (selectedValue == "0"){
      document.getElementById('select').style.color = 'gray';
    }else{
      document.getElementById('select').style.color = 'blue';
    }
    
    var i;
    for (i = 0; i < 3; i++) { 
    ddl.options[i].style.color = 'blue';
    }
    ddl.options[0].style.color = 'gray';
}

window.onload = function(){
   check();
}

<select id='select' required onchange='check()'>
  <option value="0">Default</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

Changing the color of the select onChange. I don't know if you want to do it with pure css only, but I don't see why you can't use javascript.

V2. Quick edit! Made it so that it defaults to blue when <select> is loaded, as the default option should be colored blue.

V3. Another edit! It also styled the options, so I made it not style the options, just the select!

V4. Minor edit, compacted a lot of the code to make it look better.

V5. Opps. Very silly of me, OP said gray not black. Changed all references of color = 'black' to color = 'gray'

---

Final answer. Not making any more edits.

Schear

Answer 3

The Problem is, that macOS doesn't style the option. So here's the way that works:

select {
     color: lightblue;
}

select:has(option[disabled]:checked) {
     color: coral;
}
/* if you prefer styling the option with an empty value: */
select:has(option[value=""]:checked) {
     color: purple;
}

Woodford

Answer 4

You can use the attribute selector

select[disabled]{
  color: #f00;
}

Kalina

Answer 5

try this style here select option:first-child will select your first option which is disabled.

 select option { color: blue; }
    select option:first-child{
      color: gray;
    }

Conners