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

Estoy tratando de establecer el estilo de una option en un menú desplegable de 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; } 
  Red White Blue Green  

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

Desafortunadamente, los navegadores WebKit aún no son compatibles con el estilo de las tags , excepto por el color y el color background-color .

La solución de navegador cruzada más utilizada es usar

    /

  • y darles un estilo con CSS. Los marcos como Bootstrap hacen esto bien.

    Es una elección (desde desarrolladores de navegador 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 mi mente:

    • Use Select2 que realmente convierta sus selects en ul s (permitiendo muchas cosas)
    • Divida su select s en múltiples para agrupar valores
    • Dividir en optgroup

    De hecho, descubrí algo recientemente que parece funcionar para diseñar elementos individuales dentro de Chrome, Firefox e IE usando CSS puro.

    Tal vez, intente lo siguiente:

    HTML:

      

    CSS:

     select { background-color:#000; color: #FFF; } select * { background-color:#000; color:#FFF; } select *.red { /* This, miraculously, styles the '' elements. */ background-color:#F00; color:#FFF; } select *.white { background-color:#FFF; color:#000; } select *.blue { background-color:#06F; color:#FFF; } 

    Es extraño lo que hace la cautela al viento. No parece ser compatible con :active :hover :focus :link :visited :after :before , though.

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

    Las versiones futuras de Chrome (49+) ahora admitirán elementos de diseño con font-weight . Fuente: https://code.google.com/p/chromium/issues/detail?id=44917#c22

    Nueva ventana emergente SELECCIONAR: se debe aplicar el estilo de fuente-peso.

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

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

    Tengo una solución usando jquery … aunque no podemos darle un estilo a una opción en particular, podemos diseñar la selección por sí mismo, 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; }