Firefox'taki <option> renginin değiştirilmesi

Seçtiğiniz seçeneğin metin rengini değiştirmeye çalışıyorum. IE'de çalışıyor ama Firefox'ta değil.Firefox'taki <option> renginin değiştirilmesi

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

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

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

kaynak

2012-02-22 techlead

için kırmızı renk istiyorum seçilen seçenek sadece DOM yüklendiğinde. Yani, yukarıdaki kod iyi olmalı ama FF'de çalışmıyor. – techlead

Senin için bir demo yaptım. http://jsfiddle.net/R8aPY/ Chrome ve Firefox'ta, açılır listeyi açtığınızda seçenek 1 yeşildir. –

Yeşil rengi mi kastediyorsun?Kullanıcı seçimini değiştirdikten sonra rengin yeni seçilen öğeye güncellenmeyeceğini lütfen unutmayın. – MMM

2 burada bir göz atın olarak güncellendiği:

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

Internet Explorer ve Opera'daki öğeleri varsayılan olarak, Firefox ve WebKit tarayıcıları, seçili seçeneğin renk ve arka plan rengini gösterir. jQuery selectColorize, daha fazla "fantezi" seçim kutusu değiştirmeye başvurmadan, temel seçim kutusu renk stilleri için bu davranışı çapraz tarayıcıyı normalleştirir.

kaynak

2012-02-22 22:09:11

Seçenek 1'in renginin 'change' olayında yeşil olarak ayarlanmasını istemiyorum. Lütfen soruları/yorumları tekrar okuyun. Sayfa yüklendiğinde seçenek 1'in yeşil olmasını istiyorum. – techlead

listedeki tüm öğeleri bu işe yaramazsa firefox 52.0.2 (64-bit) – GPR

Bu aradığınız çözüm olmayabilir ancak css içinde bunu yapabilir: : destekleyen tarayıcılar ile

option[selected] { 
    color: green; 
}

Bu, yalnızca seçicileri (IE7 +)

DÜZENLEME bağlıyor Yorumunuzu okuduktan sonra neyi başarmak istediğinizi anlıyorum. select yeşil VE seçili öğesini (option) yeşil (ve diğerleri siyah) yapmak istiyorsunuz. Aşağıdaki css kodu kullanarak bunu yapabilirsiniz:

select { 
    color: green; 
} 

option[selected] { 
    color: green; 
} 

option { 
    color: black; 
}

benim JSFiddle bakınız. Ancak farklı bir seçenek belirledikten sonra renkler değişmeyecek.

kaynak

2012-02-22 22:12:14 MMM

içinde monokrom bulunmaktadır. – techlead

Evet öyle mi? Ne işe yaramıyor? – MMM

Hayır, Firefox'ta yok ... ddl açıkken, tüm seçenekler öğeler beyaza siyah renktedir. – GPR

Böylece, "seçenek 1" seçildiğinde seçimin yeşil olmasını istersiniz, ancak diğerleri olduğunda değil;

"Seçenek 1" e bir özellik eklemeyi öneriyorum, bu yüzden bunun yeşil olması gereken bir özellik olduğunu ve sonra değiştirildikten sonra seçimde bir sınıfı değiştirdiğini biliyorsunuz. bu JavaScript

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

Ve deneyin:

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

sizin CSS ekleyin:

Yani, bu olmak HTML'nizi değiştirmek

$(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/

kaynak

2012-02-22 23:13:06

Lütfen "UPDATED 2" altındaki güncellenmiş kodlara bakın. Demo çalışmasına rağmen, FF 9.0.1 ve IE 8'de denedim. Herhangi bir tarayıcıda çalışmıyor. SK11 @ – techlead

: Chrome 18 benim için çalışır, FF 10. elemanları '

Firefox'taki <option> renginin değiştirilmesi

cevap