फ़ायरफ़ॉक्स

में फ़ायरफ़ॉक्स

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

अपडेट 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>

स्रोत

2012-02-22 techlead

मुझे लाल रंग चाहिए चयनित विकल्प केवल तभी लोड किया गया जब डोम लोड हो गया हो। तो, उपर्युक्त कोड ठीक होना चाहिए लेकिन यह एफएफ में काम नहीं कर रहा है। – techlead

मैंने आपके लिए डेमो बनाया है। http://jsfiddle.net/R8aPY/ क्रोम और फ़ायरफ़ॉक्स में, जब आप ड्रॉप डाउन खोलते हैं तो विकल्प 1 हरा होता है। –

आपका मतलब हरा रंग है?कृपया ध्यान रखें कि उपयोगकर्ता अपने चयन को बदलने के बाद यह नए चयनित तत्व को रंग अपडेट नहीं करेगा। – MMM

यहाँ एक नज़र डालें:

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

डिफ़ॉल्ट रूप से, इंटरनेट एक्सप्लोरर और ओपेरा में तत्वों का चयन करें चयनित विकल्प का रंग और पृष्ठभूमि रंग दिखाएं, जबकि फ़ायरफ़ॉक्स और वेबकिट ब्राउज़र नहीं हैं। jQuery चयन का चयन करें मूल चयन बॉक्स रंग स्टाइल के लिए क्रॉस-ब्राउज़र, बिना "फैंसी" चयन बॉक्स प्रतिस्थापन का सहारा लेता है।

स्रोत

2012-02-22 22:09:11

मैं नहीं चाहता कि विकल्प 1 का रंग 'परिवर्तन' ईवेंट पर हरे रंग में सेट किया जाए। कृपया प्रश्न/टिप्पणियों को दोबारा पढ़ें। पेज लोड होने पर मैं विकल्प 1 हरा होना चाहता हूं। – techlead

सूची में सभी तत्व फ़ायरफ़ॉक्स 52.0.2 (64-बिट) – GPR

यह समाधान आप देख रहे हैं नहीं हो सकता है, लेकिन आपको लगता है कि सीएसएस में कर सकते हैं: : कि समर्थन ब्राउज़रों के साथ

option[selected] { 
    color: green; 
}

यह केवल काम करता है चयनकर्ताओं (IE7 +)

संपादित विशेषता अपनी टिप्पणी पढ़ने के बाद मैं समझता हूं कि आप क्या हासिल करना चाहते हैं। आप select हरे और चयनित तत्व (option) हरे रंग (और बाकी को काला) बनाना चाहते हैं। आप निम्न सीएसएस कोड का उपयोग कर ऐसा कर सकते हैं:

select { 
    color: green; 
} 

option[selected] { 
    color: green; 
} 

option { 
    color: black; 
}

मेरा JSFiddle देखें। हालांकि आप एक अलग विकल्प चुनने के बाद रंग नहीं बदलेंगे।

स्रोत

2012-02-22 22:12:14 MMM

में मोनोक्रोम हैं, यह काम नहीं करता है। – techlead

हाँ यह करता है ...? क्या काम नहीं करता है? – MMM

नहीं, यह फ़ायरफ़ॉक्स में नहीं है ... डीडीएल खुला होने पर सभी विकल्प तत्व सफेद पर काले होते हैं। – GPR

तो, आप चाहते हैं कि "विकल्प 1" चुना गया हो, लेकिन जब अन्य लोग हों तो हरे रंग का चयन करें?

मैं "विकल्प 1" में एक विशेषता जोड़ने का सुझाव देता हूं, इसलिए आप जानते हैं कि वह हरा होना चाहिए, और उसके बाद चयन के समय चयन पर एक वर्ग टॉगल करें।

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

अपने सीएसएस करने के लिए इस जोड़ें::

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

और कोशिश इस जावास्क्रिप्ट:

तो, यह होना करने के लिए अपने HTML बदलने

$(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'); 
     } 
    }); 
});

डेमो: http://jsfiddle.net/UyxaT/3/

स्रोत

2012-02-22 23:13:06

कृपया 'अद्यतन 2' के तहत अद्यतन कोड देखें। भले ही डेमो काम करता है, मैंने इसे एफएफ 9.0.1 और आईई 8 में आजमाया। यह किसी भी ब्राउज़र में काम नहीं कर रहा है। – techlead

@ एसके 11: क्रोम 18 में मेरे लिए काम करता है, एफएफ 10. आईई 9 में काम नहीं कर रहा है। स्टाइलिंग '

फ़ायरफ़ॉक्स

उत्तर