Tengo algunos problemas para hacer que funcione una regla CSS simple. Quiero que un campo de opción en un elemento seleccionado cambie su color cuando se seleccione. De acuerdo con w3school : marcado sería el selector correcto, ya que se aplica a la entrada y la opción. Puede ser una solución totalmente fácil, pero no puedo entender qué es lo que está mal. ¿Algunas 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>verifique este ejemplo, usando css he cambiado el diseño de la opción marcada, espero que esto ayude
<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>