Style invalid <select> using :invalid - html

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>

Answer 3

.choose_elements{
background-color : red;
}
.elements{
background-color : white;
}
<select required
onchange="this.className=this.options[this.selectedIndex].className"
class="choose_elements">
<option value="0" class="choose_elements">- please choose -</option>
<option value="1" class = "elements">A</option>
<option value="2" class = "elements">B</option>
</select>