I'm having some trouble getting a simple CSS rule to work. I want to have an option field in a select element change it's color when it's selected. According to w3school :checked would be the correct selector as it applies to input and option. It might be a totally easy fix but I can't figure out what's wrong. Any ideas?
#location-options select option:checked {
color: red;
}<form id="location-options">
<select name="location-category" id="location-category">
<option value="">Select</option>
<option value="test1">Imbiss</option>
<option value="test2">Restaurant</option>
</select>
</form>check this example , using css I have changed the design of checked option, hope this will help
<form id="location-options">
<select name="location-category" id="location-category">
<option value="">Select</option>
<option value="test1">Imbiss</option>
<option value="test2" selected>Restaurant</option>
<option value="test1">Imbiss</option>
<option value="test2">Restaurant</option>
</select>
</form>
<style>
#location-options select option[selected],
#location-options select option:hover,
#location-options select option:focus,
#location-options select option:active,
#location-options select option:checked {
background: red;
color: white
}
</style>