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>
- please choose -
is red on the select box for me (Firefox 61, Arch Linux, Gnome).