Cambiando el color de <option> en firefox

Estoy tratando de cambiar el color del texto de la opción que está seleccionada. Está funcionando en IE pero no en Firefox.Cambiando el color de <option> en firefox

<html> 
    <head> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("option:selected").css("color", "green"); 
     }); 
     </script> 
</head> 
<body> 
    <select id="mySelect"> 
     <option selected="selected">option 1</option> 
     <option>option 2</option> 
     <option>option 3</option> 
    </select> 
</body> 
</html>

actualiza

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("select").css("color", "green").focus(function() { 
        $(this).css('color', 'black'); 
       }).blur(function() { 
       $(this).css('color', 'green'); 
      }); 
     }); 
     </script> 
</head> 
<body> 
    <select id="mySelect"> 
     <option selected="selected">option 1</option> 
     <option>option 2</option> 
     <option>option 3</option> 
    </select> 
</body> 
</html>

ACTUALIZADO 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <style type="text/css"> 
      select.green{ 
       color: green; 
      } 
      option { 
       color: black; 
      } 
     </style> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       var green = $('option:selected', 'select').data('green'); 
       if (green) { 
        $('select').addClass('green'); 
       } 
       $('select').change(function() { 
        var green = $('option:selected', this).data('green'); 
        if (green) { 
         $('select').addClass('green'); 
        } 
        else { 
         $('select').removeClass('green'); 
        } 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <select id="mySelect"> 
      <option selected="selected" data-green="true">option 1</option> 
      <option>option 2</option> 
      <option>option 3</option> 
     </select> 
    </body> 
</html>

Fuente

2012-02-22 techlead

Quiero el color rojo para el opción seleccionada solo cuando el DOM se ha cargado. Entonces, el código anterior debería estar bien, pero no está funcionando en FF. – techlead

Hice una demostración para usted. http://jsfiddle.net/R8aPY/ En Chrome y Firefox, la opción 1 es verde cuando abres el menú desplegable. –

¿Te refieres al color verde?Tenga en cuenta que después de que el usuario cambie su selección, no actualizará el color del elemento recién seleccionado. – MMM

Echa un vistazo aquí:

http://benalman.com/code/projects/jquery-misc/examples/selectcolorize/

Por defecto, los elementos selectos de Internet Explorer y Opera muestran el color y el fondo de opción seleccionada de color, mientras que Firefox y WebKit navegadores no lo hacen. jQuery selectColorize normaliza este comportamiento cross-browser para el estilo básico de selección de color de cuadro, sin tener que recurrir a reemplazos de cuadro más "elegantes".

Fuente

2012-02-22 22:09:11

No deseo que el color de la opción 1 se configure en verde en el evento 'change'. Por favor vuelve a leer las preguntas/comentarios. Quiero que la opción 1 sea verde cuando se carga la página. – techlead

todos los elementos de la lista son monocromos en firefox 52.0.2 (64-bit) – GPR

Esto podría no ser la solución que busca, pero se puede hacer eso en css:

option[selected] { 
    color: green; 
}

Esto sólo funciona con navegadores que soportan atribuyen selectores (IE7 +)

EDIT: Después de leer tu comentario, entiendo lo que quieres lograr. Desea que el select sea verde Y el elemento seleccionado (option) verde (y el resto en negro). Puede hacerlo utilizando el siguiente código CSS:

select { 
    color: green; 
} 

option[selected] { 
    color: green; 
} 

option { 
    color: black; 
}

Ver mi JSFiddle. Sin embargo, los colores no cambiarán después de seleccionar una opción diferente.

Fuente

2012-02-22 22:12:14 MMM

esto no funciona. – techlead

Sí lo hace ...? ¿Qué no funciona? – MMM

No, no lo hace en Firefox ... todos los elementos de opciones son negros sobre blanco cuando el ddl está abierto, siempre. – GPR

Entonces, ¿desea que la selección sea verde cuando se selecciona "opción 1", pero no cuando están las otras?

Sugiero agregar un atributo a la "opción 1", para que sepa que es uno que debe ser verde, y luego alternar una clase en la selección cuando se modifique.

Por lo tanto, cambiar el código HTML para ser la siguiente:

<select id="mySelect"> 
    <option selected="selected" data-green="true">option 1</option> 
    <option>option 2</option> 
    <option>option 3</option> 
</select>

Añadir esto a tu CSS:

select.green{ 
    color: green; 
} 
option { 
    color: black; 
}

Y tratar este JavaScript:

$(function(){ 
    var green = $('option:selected', 'select').data('green'); 
    if (green) { 
     $('select').addClass('green'); 
    } 


    $('select').change(function() { 
     var green = $('option:selected', this).data('green'); 
     if (green) { 
      $('select').addClass('green'); 
     } 
     else { 
      $('select').removeClass('green'); 
     } 
    }); 
});

DEMO: http://jsfiddle.net/UyxaT/3/

Fuente

2012-02-22 23:13:06

Por favor, vea el código actualizado debajo de 'ACTUALIZADO 2'. Aunque la demostración funciona, probé en FF 9.0.1 e IE 8. No funciona en ningún navegador. – techlead

@ SK11: Funciona para mí en Chrome 18, FF 10. Parece que no funciona en IE 9. Diseñar elementos '

Cambiando el color de <option> en firefox

Respuesta