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;
}

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/