jquery चुने गए बॉक्स को चुनने के लिए कैसे चुनें

Question

मैं अपने multi-select बॉक्स के लिए jQuery का उपयोग कर रहा हूं। हालांकि, मुझे chosen.css फ़ाइल में पूर्व-परिभाषित शैलियों को ओवरराइट करने में कठिनाई होती है, जो पूरी तरह से chosen.css से छुटकारा पाता है, यह भी एक बहुत अच्छा विकल्प नहीं हो सकता है।

यहाँ मेरी बेला है: https://jsfiddle.net/k1Lr0342/

HTML:

<select class="chosen" multiple="true" style="height: 34px; width: 280px"> 
    <option>Choose...</option> 
    <option>jQuery</option> 
    <option selected="selected">MooTools</option> 
    <option>Prototype</option> 
    <option selected="selected">Dojo Toolkit</option> 
</select> 

सीएसएस:

.chosen-choices { 
    border-radius: 3px; 
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); 
    border: none; 
    height: 34px !important; 
    cursor: text; 
    margin-top: 12px; 
    padding-left: 15px; 
    border-bottom: 1px solid #ddd; 
    width: 285px; 
    text-indent: 0; 
    margin-left: 30px; 
    } 

मैं सीधे .chosen-choicesul के लिए सीएसएस लिखने का प्रयास किया। कुछ border-radius और box-shadow जैसे काम करता है। लेकिन अन्य: margin, height, padding, border, आदि chosen.css फ़ाइल द्वारा अधिलेखित हो जाते हैं। एक विकल्प है कि प्रत्येक सेटिंग के लिए !important डालें जो काम नहीं करता है। यह ज्यादातर सामानों के लिए काम करेगा लेकिन अभी भी ऊंचाई नहीं है। कोई विचार?

Answer 1

CSS will accept style that uses more specified selector.

.chosen-container-multi .chosen-choices { 
    /*blah blah*/ 
} 

.chosen-choices { 
    /* less specificity, this style might not work */ 
} 

Working fiddle

Answer 2

यदि आप चुनी.css में .chosen-choices देखते हैं, तो आपको ऊंचाई auto!important मिल जाएगी। उन !important हटाएं (या टिप्पणी करें) और यह ठीक होना चाहिए।

आप लागू सीएसएस की जांच के लिए अपने ब्राउज़र के तत्व निरीक्षक का उपयोग कर सकते हैं। मैं व्यक्तिगत रूप से हर बार क्रोम डेवलपर टूल का उपयोग करता हूं। मुझे परेशानी का बहुत कुछ सहेजें

Answer 3

jQuery उपयोग करने का प्रयास, यहाँ काम JSFIDDLE

$(".chosen-choices li").css("background","red"); 

Answer 4

लिटिल है देर से, लेकिन मैंने सोचा कि मैं के बाद से जवाब देने के चाहते हैं मैं इसमें भाग गया। चूंकि आपके द्वारा चुने गए चुने गए आइटम चुनिंदा मेनू पर आधारित होते हैं, इसलिए आपको इसके बाद तुरंत div में तत्व ढूंढना होगा (चुने गए द्वारा बनाई गई) और इसे स्टाइल करें। आप Jquery के साथ ऐसा कर सकते हैं यह मानते हुए कि आप जानते हैं कि यह मूल्य है।

$('.your-select-menu').next().find('.search-choice').each(function() { 
 
    if ($(this).text() === someValue) { 
 
    $(this).css("border-color", "#00b300"); 
 
    } 
 
})

इस