Hasta que esto se apoya en un estándar HTML, cualquiera y todas las respuestas dadas han sido problemáticos , incluido:
- Los atributos de clase están permitidos en los elementos secundarios de un elemento seleccionado, pero si/cómo se aplica el estilo al elemento varía enormemente entre navegadores y versiones de navegador.
- Prefijo con & nbsp; tendrá la consecuencia de que si el elemento seleccionado es más estrecho que la opción seleccionada, el efecto visual no será agradable, con el texto legible oculto a la derecha (ver ejemplo a continuación).
- Cualquier estilo que aplique no encajará necesariamente con el estilo al que el usuario del navegador se haya acostumbrado. negrita y cursiva es Firefox, pero no necesariamente todos los navegadores. Muchos navegadores aplican un estilo que incluye el color gris para ayudar a indicar que el grupo opcional NO se puede seleccionar
- El usuario no necesariamente esperará el concepto de una etiqueta selecta de grupo de opciones.
Esto me ha llevado a la conclusión de la mejor manera de solucionar el problema es o bien utilizar una biblioteca como interfaz de usuario seleccionables para todas selecciona a través de su sitio (por consistencia), o utilizar la primera opción en el optgroup a representar a la selección de todos los niños, con una descripción clara (como «todos los vehículos de Suecia):
<select multiple="multiple">
<optgroup label="Parent">
<option value="0" class="optionChild">ALL Children</option>
<option value="1" class="optionChild">Child Tag 1</option>
<option value="2" class="optionChild">Child Tag 2</option>
</optgroup>
</select>
.my-select {
width: 60px;
}
<select class="my-select">
<option>Parent</option>
<option selected="selected"> Child</option>
</select>
Intenté esto, pero solo funciona en Firefox –
Lo siento, olvidé la opción de estilo es un lío en los navegadores web – grifos
Al menos puedes crear una sangría al agregar – grifos