¿Cómo se diseña el elemento de opción de una etiqueta de selección?

Question

Estoy tratando de establecer el estilo de un option en un menú desplegable select en Google Chrome. Funciona en todos los navegadores excepto IE9 y Chrome.

option.red { 
 
    background-color: #cc0000; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    color: white; 
 
}

<select name="color"> 
 
    <option class="red" value="red">Red</option> 
 
    <option value="white">White</option> 
 
    <option value="blue">Blue</option> 
 
    <option value="green">Green</option> 
 
</select>

Sin el uso de JavaScript, ¿hay una manera de establecer el estilo de las opciones de Google Chrome? Una vez seleccionado, el color de fondo no se muestra.

Answer 1

Desafortunadamente, los navegadores WebKit no son compatibles con el estilo de las etiquetas <option>, excepto por color y background-color.

La solución de navegador más utilizada es utilizar <ul>/<li> y aplicarles un estilo mediante CSS. Los marcos como Bootstrap hacen esto bien.

Answer 2

Es una elección (desde desarrolladores de explorador o W3C, no puedo encontrar ninguna especificación W3C sobre cómo diseñar opciones de selección) que no permite seleccionar opciones de estilo.

Sospecho que esto sería para mantener la coherencia con las listas de opciones nativas.
(piense en dispositivos móviles, por ejemplo).

3 soluciones vienen a la mente:

• Uso Select2 que en realidad se convierte sus selecciona en ul s (permitiendo muchas cosas)
• dividir su select s en múltiples para agrupar valores
• de Split en optgroup

Answer 3

De hecho, descubrí algo recientemente que parece funcionar para stylin g elementos individuales <option></option> dentro de Chrome, Firefox e IE usando CSS puro.

Tal vez, pruebe lo siguiente:

HTML:

<select> 
    <option value="blank">Blank</option> 
    <option class="white" value="white">White</option> 
    <option class="red" value="red">Red</option> 
    <option class="blue" value="blue">Blue</option> 
</select> 

CSS:

select { 
    background-color:#000; 
    color: #FFF; 
} 

select * { 
    background-color:#000; 
    color:#FFF; 
} 

select *.red { /* This, miraculously, styles the '<option class="red"></option>' elements. */ 
    background-color:#F00; 
    color:#FFF; 
} 

select *.white { 
    background-color:#FFF; 
    color:#000; 
} 

select *.blue { 
    background-color:#06F; 
    color:#FFF; 
} 

extraño lo que lanza la precaución al viento hace. Sin embargo, no parece ser compatible con :active :hover :focus :link :visited :after :before.

Ejemplo en jsFiddle: http://jsfiddle.net/Xd7TJ/2/

Answer 4

Las futuras versiones de Chrome (49+) será ahora apoyar styling <option> elementos con font-weight. Fuente: https://code.google.com/p/chromium/issues/detail?id=44917#c22

Nuevo SELECT Popup: se debe aplicar el estilo font-weight.

Este CL elimina themeChromiumSkia.css.|!important| en él se previno a aplicar font-weight. Ahora html.css tiene |font-weight:normal|, y |!important| debería ser innecesario.

Hubo una hoja de estilos de Chrome, themeChromiumSkia.css, que usó font-weight: normal !important; en ella todo este tiempo. Debería estar en el canal estable de Chrome con la versión 49.0.

Answer 5

Tengo una solución usando jquery ... aunque no podemos darle un estilo a una opción en particular, podemos darle estilo a la selección en sí misma y usar javascript para cambiar la clase de la selección en función de lo que se seleccione. Funciona suficientemente para casos simples.

$('select.potentially_red').on('change', function() { 
 
if ($(this).val()=='red') { 
 
    $(this).addClass('option_red'); 
 
} else { 
 
    $(this).removeClass('option_red'); 
 
} 
 
}); 
 
$('select.potentially_red').each(function() { 
 
if ($(this).val()=='red') { 
 
    $(this).addClass('option_red'); 
 
} else { 
 
    $(this).removeClass('option_red'); 
 
} 
 
});

.option_red { 
 
    background-color: #cc0000; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    color: white; 
 
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<!-- The js will affect all selects which have the class 'potentially_red' --> 
 
<select name="color" class="potentially_red"> 
 
    <option value="red">Red</option> 
 
    <option value="white">White</option> 
 
    <option value="blue">Blue</option> 
 
    <option value="green">Green</option> 
 
</select>

Tenga en cuenta que el js consta de dos partes, la parte each para inicializar todo en la página correctamente, la parte .on('change', ... para responder al cambio. No pude modificar el js en una función para SECAR, lo rompe por alguna razón