As the style of the selected option color separately from the disabled option

Question

I have an HTML dropdown menu with the first option disabled. I would like to show that the option is disabled by default in gray, but as soon as I select a different value, I would like it to be blue. How can I achieve this?

I managed to get the selected option as gray, and the selected options will appear as blue in the list. But both disabled and non-disabled options will appear gray anyway after they are selected:

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

Answer 1

You can do this if you place the required tag to select the item.

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/

Answer 2

select[disabled]{
  color: #f00;
}

Answer 3

try this style here select option:first-childwill choose your first option, which is disabled.

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