Style invalid <select> using :invalid

Question

I have a <select>:

select:invalid {
  color: red;
}

<select required>
  <option disabled selected>- please choose -</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>

Unfortunately the disabled select is not marked red.

Any idea?

It's not the option I like to style, I like to style the select!

Answer 1

You need to specify value="" for the first option. Without value="", the value of an option is implicitly equal to its text content, meaning it fulfils the required constraint.

Demo:

select:invalid { color: red; }

<select required>
  <option disabled value="" selected>- please choose -</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>

The above will make the select + all options red until a value has been chosen.

If you want the options to always be black, just extend the CSS a little:

select:invalid { color: red; }
select option { color: black; }

<select required>
  <option disabled value="" selected>- please choose -</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>

Answer 2

Try to use option:disabled.

select option:disabled {
  color: red;
}

<select required>
  <option disabled selected>- please choose -</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>