Aplicar estilo a parte del texto OPCIÓN
Tengo una lista SELECT con varios elementos OPTION. Aquí está mi enfoque ingenuo para diseñar parte del texto de la opción:
<select name="color">
<option value="0">red <span style="font-weight: bold;">SLOW</span></option>
<option value="1">blue <span style="font-weight: bold;">SLOWER</span></option>
<option value="2">green <span style="font-weight: bold;">SLOWEST</span></option>
</select>
Esto no funciona: al navegador no le gusta un elemento SPAN dentro del elemento OPTION.
¿Existe alguna otra forma de aplicar estilo a parte del texto de un elemento OPCIÓN?
Aceptado
Pero siempre puedes crear un cuadro de selección personalizado. Consulte el jsFiddle a continuación,
JSFiddle para opciones de cuadro de selección multicolor
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
html: $this.children('option').eq(i).text()
.split(' ').join(' <span style="color:red">'),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
No. optionLos s tienen un estilo nativo de la plataforma, y diseñar solo una parte de uno no funciona. (Por lo general, tampoco sería una buena idea).
