स्टाइल <select> तत्व चयनित <option>

Question

पर आधारित तत्व select तत्व को option पर आधारित केवल सीएसएस के साथ चुना गया है? मैं मौजूदा JavaScript solutions से अवगत हूं।

मैंने विकल्प तत्व को स्टाइल करने की कोशिश की, लेकिन यह विकल्प की सूची में विकल्प तत्व को केवल स्टाइल देगा, चयनित तत्व के लिए नहीं।

select[name="qa_contact"] option[value="3"] { 
    background: orange; 
} 

http://jsfiddle.net/Aprillion/xSbhQ/

यदि संभव हो तो नहीं

सीएसएस 3 के साथ, भविष्य में CSS 4 subject selector मदद करेंगे - या इस सीएसएस के लिए एक वर्जित फल रह जाएगा?

Answer 1

दुर्भाग्य से, हाँ - यह केवल कुछ सीएसएस के साथ संभव नहीं है। जैसा कि this question पर उत्तरों और टिप्पणियों में उल्लिखित है, वर्तमान में पैरेंट तत्व को बच्चों पर आधारित स्टाइल प्राप्त करने का कोई तरीका नहीं है।

आपको क्या चाहते हो करने के लिए, आप अनिवार्य रूप से पता लगाने के लिए जो बच्चों (<option>) का चयन किया जाता है के लिए होता है, और उसके बाद माता-पिता शैली के हिसाब से।

हालांकि, आप इस एक बहुत ही सरल jQuery कॉल के साथ पूरा कर सकते हैं, इस प्रकार है:

एचटीएमएल

<select> 
    <option value="foo">Foo!</option> 
    <option value="bar">Bar!</option> 
</select> 

jQuery

var $select = $('select'); 
$select.each(function() { 
    $(this).addClass($(this).children(':selected').val()); 
}).on('change', function(ev) { 
    $(this).attr('class', '').addClass($(this).children(':selected').val()); 
}); 

सीएसएस

select, option { background: #fff; } 
select.foo, option[value="foo"] { background: red; } 
select.bar, option[value="bar"] { background: green; } 

यहां एक working jsFiddle है।

चयनकर्ताओं के भविष्य के बारे में प्रश्न पर वापस जाएं। हां - "विषय" चयनकर्ताओं का उद्देश्य आप जो भी उल्लेख करते हैं, वही करना है। जब वे कभी वास्तव में आधुनिक ब्राउज़रों में लाइव जाते हैं, आप के लिए ऊपर दिए गए कोड अनुकूलन कर सकता है /:

select { background: #fff; } 
!select > option[value="foo"]:checked { background: red; } 
!select > option[value="bar"]:checked { background: green; } 

अतिरिक्त नोट के रूप में, वहाँ अभी भी है कि क्या ! से पहले या विषय के बाद जाना चाहिए बहस चल रही है। यह !something के प्रोग्रामिंग मानक पर आधारित है जिसका अर्थ है "कुछ नहीं"। नतीजतन, विषय आधारित सीएसएस वास्तव में इस के बजाय की तरह लग रही हवा दे सकता है:

select { background: #fff; } 
select! > option[value="foo"]:checked { background: red; } 
select! > option[value="bar"]:checked { background: green; } 

Answer 2

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

आईई में पुनर्निर्मित मुद्दों को ठीक करने के लिए, इसे font-size को न्यूनतम राशि, + - 1 से बदलना आवश्यक था।दूसरी बात, जो अच्छी तरह से प्रलेखित नहीं प्रतीत होती है, यह है कि छद्म वर्ग :checked भी चुनिंदा नियंत्रणों पर काम करता है।

fiddler जोड़ा गया सीएसएस दिखाने के लिए जो इसे संभव बनाता है।

मैंने केवल क्रोम और आईई 9, fyi पर इसके साथ संक्षेप में खेला।

संपादित करें: जाहिर है, आपको विशिष्ट विकल्प हाइलाइटिंग के लिए [value = "x"] को वांछित मान पर सेट करने की आवश्यकता होगी।