How to style selected option color separately from disabled option

html css select option selected
Neoweiter picture Neoweiter · Mar 3, 2014 · Viewed 11.7k times · Source

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 ?

enter image description here

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

thepi picture thepi · Jan 1, 2018

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/

Related questions

problem with <select> and :after with CSS in WebKit

I would like to add some style on a select box with the pseudo :after (to style my select box with 2 parts and without images). Here's the HTML: <select name=""> <option value="">Test</option> &…

Read More
How to indent multiple levels of select optgroup with CSS?

Just trying to indent optgroup blocks by nesting depth really, I've tried a general margin-left rule, nested elements then trying to apply the same rule, tried padding-left... is indenting like this possible? It seems elementary :P In the example below, …

Read More
HTML Select tag show vertical scroll with 10 option

I want to make a select box like this with 10 select option, when I try to add more than 15 option it show vertical scroll bar, but not show when it have 10 option. is there any way to achieve this.

Read More