सीएसएस: चयनित छद्म वर्ग के समान: चेक किया गया, लेकिन <select> तत्व

Question

<select> तत्व में वर्तमान में चयनित <option> तत्व शैली को शैली देने का कोई तरीका है?

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

Answer 1

:checked छद्म वर्ग शुरू में ऐसे तत्वों HTML4 selected है और checked जिम्मेदार बताते हैं कि करने के लिए लागू होता है

स्रोत: w3.org

---

तो, यह सीएसएस काम करता है, हालांकि color स्टाइल प्रत्येक ब्राउज़र में संभव नहीं है:

option:checked { color: red; } 

---

कार्रवाई में इसका एक उदाहरण, ड्रॉप डाउन सूची से वर्तमान में चयनित आइटम को छुपाएं। आप केवल शैली कर सकते हैं

select { color: red; } 
option:not(:checked) { color: black; } /* or whatever your default style is */ 

Answer 2

असल:

option:checked { display:none; }

<select> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option>C</option> 
 
</select>

---

वर्तमान में चयनित विकल्प में लटकती रूप में अच्छी तरह से बंद कर दिया शैली के लिए, आप तर्क पीछे की कोशिश कर सकते पर कुछ सीएसएस गुण: संशोधित ऑप्ट आयन तत्व color काम नहीं करता है, background-color या तो, लेकिन आप background-image सेट कर सकते हैं।

आप इसे चाल करने के लिए ग्रेडियेंट के साथ जोड़ सकते हैं। छिपकली/वेबकिट पर

option:hover, 
 
option:focus, 
 
option:active, 
 
option:checked { 
 
    background: linear-gradient(#5A2569, #5A2569); 
 
}

<select> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option>C</option> 
 
</select>

काम करता है।

Answer 3

यह मेरे लिए काम किया:

select option { 
    color: black; 
} 
select:not(:checked) { 
    color: gray; 
}