Zmiana koloru <option> w firefox

Próbuję zmienić kolor tekstu wybranej opcji. Działa w IE, ale nie w Firefoksie.Zmiana koloru <option> w 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>

Updated

<!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>

AKTUALIZACJA 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>

Źródło

2012-02-22 techlead

Chcę czerwony kolor dla wybrana opcja tylko wtedy, gdy załadowano DOM. Tak więc powyższy kod powinien być w porządku, ale nie działa w FF. – techlead

Zrobiłem dla ciebie demo. http://jsfiddle.net/R8aPY/ W przeglądarce Chrome i Firefox opcja 1 jest zielona po otwarciu menu rozwijanego. –

Masz na myśli zielony kolor?Należy pamiętać, że po zmianie przez użytkownika jego wyboru nie spowoduje to zmiany koloru na nowo wybrany element. – MMM

Spójrz tutaj:

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

Domyślnie wybrane elementy w Internet Explorer i Opera pokazują kolor i kolor wybranej opcji w opcji , podczas gdy przeglądarki Firefox i WebKit nie. jQuery selectColorize normalizuje to zachowanie, aby uzyskać przekierowanie na podstawowy styl zaznaczania boxów, bez konieczności stosowania dodatkowych "ozdobnych" zastępczych pudełek.

Źródło

2012-02-22 22:09:11

Nie chcę, aby kolor opcji 1 był ustawiony na zielony w przypadku 'change'. Przeczytaj ponownie pytanie/komentarze. Chcę, aby opcja 1 świeciła na zielono podczas ładowania strony. – techlead

wszystkie elementy na liście są monochromatyczne w firefox 52.0.2 (64-bit) – GPR

To może nie być rozwiązaniem szukasz, ale można to zrobić w CSS:

option[selected] { 
    color: green; 
}

Zadziała tylko z przeglądarkami, które obsługują atrybutów selektorów (IE7 +)

EDIT: Po przeczytaniu Twojego komentarza rozumiem, co chcesz osiągnąć. Chcesz, aby zielony i wybrany element() był zielony (a reszta - czarna). Można to zrobić za pomocą następującego kodu CSS:

select { 
    color: green; 
} 

option[selected] { 
    color: green; 
} 

option { 
    color: black; 
}

Zobacz moją JSFiddle. Jednak kolory nie zmienią się po wybraniu innej opcji.

Źródło

2012-02-22 22:12:14 MMM

to nie działa. – techlead

Tak, to robi ...? Co nie działa? – MMM

Nie ma go w Firefoksie ... wszystkie elementy opcji są czarne na białym, gdy ddl jest otwarty, zawsze. – GPR

A więc chcesz, aby zaznaczenie było zielone, gdy wybrana jest "opcja 1", ale nie, gdy pozostałe są?

Sugeruję dodanie atrybutu do "opcji 1", więc wiesz, że to taki, który powinien być zielony, a następnie przełącz klasę na wybierz, gdy jest zmieniony.

więc zmienić swój kod HTML będzie to:

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

Dodaj to do Twojego CSS:

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

I spróbować 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/

Źródło

2012-02-22 23:13:06

Zobacz zaktualizowany kod w "UPDATED 2". Mimo że demo działa, próbowałem go w FF 9.0.1 i IE 8. To nie działa w żadnej przeglądarce. – techlead

@ SK11: Działa dla mnie w Chrome 18, FF 10. Wydaje się nie działać w IE 9. Stylizacja '

Zmiana koloru <option> w firefox

Odpowiedz