मल्टीइलेक्ट ड्रॉपडाउन बॉक्स में चयनित वस्तुओं के पृष्ठभूमि रंग को कैसे बदला जाए?

Question

मैं मल्टीसेलेक्ट ड्रॉपडाउन बॉक्स में चयनित आइटमों में पीला रंग देना चाहता हूं। डिफ़ॉल्ट रूप से, चुनने के बाद इसमें भूरे रंग की पृष्ठभूमि है, मैं इसे HTML, CSS में करना चाहता हूं।

क्या कोई इस में सहायता कर सकता है?

Answer 1

हम DOMS चयन करने के लिए जे एस का उपयोग कर सकते हैं।

$('select').change(function() { 
    $('option').css('background', 'none'); 
    $('option:selected').css('backgroundColor', 'red'); 
}).change() 

<select> 
    <option>1111111</option> 
    <option>222222222</option> 
    <option>33333333</option> 
    <option>44444444</option> 
</select> 

डेमो: http://jsfiddle.net/TxbVt/1/

Answer 2

आप नहीं कर सकते। <option> तत्व सीएसएस स्टाइल स्वीकार नहीं करता है।

आप जावास्क्रिप्ट-आधारित विकल्प का उपयोग कर सकते हैं। कई <select> प्रतिस्थापन स्क्रिप्ट उपलब्ध हैं।

Answer 3

निम्नलिखित (ब्राउज़रों कि स्टाइल विकल्प टैग की अनुमति देने के लिए) काम करना चाहिए, लेकिन डिफ़ॉल्ट चयन स्टाइल ज्यादातर मामलों में पार कर जाएगी। आप फिर भी इसे निष्क्रिय करने के लिए एक रास्ता खोजने के लिए सक्षम हो सकता है:

• http://jsfiddle.net/DEDX7/
• http://jsfiddle.net/DEDX7/1/

सीएसएस

select option.selected { 
    font-weight: bold; 
    color: red; 
} 

जावास्क्रिप्ट

function highlight_options(field){ 
    var i,c; 
    for(i in field.options){ 
    (c=field.options[i]).className=c.selected?'selected':''; 
    } 
} 

मार्कअप

<select onchange="highlight_options(this)" multiple="multiple"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option> 
</select> 

Answer 4

शुद्ध सीएसएस यहाँ मदद मिलेगी:

option:checked 

Answer 5

<style> 
    .select2-container--default .select2-results__option[aria-selected=true] { 
     background-color: inherit; 
     color: lightgray; 
    } 
</style> 

ब्लॉक के अंदर अपनी शैली जोड़ें।

Answer 6

हम नीचे दिए गए सीएसएस की सहायता से बस कर सकते हैं।

select option:checked{ background: #1aab8e -webkit-linear-gradient(bottom, #1aab8e 0%, #1aab8e 100%); }