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

Question

क्या किसी <option>तत्व में वर्तमान में चयनित तत्व को स्टाइल करने का एक तरीका है <select>?

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

Answer 1

:checkedछद्म वर्ग शुरू में ऐसे तत्वों HTML4 है पर लागू होता है selectedऔर checkedगुण

स्रोत: w3.org

---

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

option:checked { color: red; }

---

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

option:checked { display:none; }

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

---

बंद ड्रॉपडाउन में वर्तमान में चयनित विकल्प को स्टाइल करने के लिए , आप तर्क को उलटने की कोशिश कर सकते हैं:

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

Comments

क्या आपने इसका परीक्षण किया? यह FF8 पर मेरे लिए काम करने के लिए प्रतीत नहीं होता है । अद्यतन: यह क्रोमियम 15 में भी काम नहीं करता है।

— ब्रिगैंड

@ मीमैट मैंने इसे क्रोम 16 में भी जांचा। जैसा कि मैंने अपनी पिछली टिप्पणी में कहा था कि यह ड्रॉपडाउन सूची में चयनित विकल्प को स्टाइल करता है, लेकिन बंद देखने योग्य क्षेत्र में नहीं।

— वेब_डिजाइनर

@Web_Designer ठीक है, मैं इस मुद्दे को देखता हूं। मैंने अपने जवाब को दूसरे (winky) समाधान के साथ संपादित किया।

— एम्मेट

स्वीकृत जवाब क्रोम में मेरे लिए काम नहीं करता है। आप यहां परीक्षण कर सकते हैं: jsfiddle.net/hk4s0ech

— आंद्रे चेनियर

Answer 2

वास्तव में आप केवल कुछ ही सीएसएस गुणों को स्टाइल कर सकते हैं : संशोधित विकल्प तत्व। 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>

जेको / वेबकिट पर काम करता है।

Comments

स्वीकृत उत्तर मेरे काम नहीं आया, लेकिन इस समाधान ने किया। धन्यवाद!

— एंथनी हिलार्ड

ध्यान दें कि आप फ़िल्टर को इस तरह भी लागू कर सकते हैं: विकल्प: चेक किया गया {फ़िल्टर: ग्रेस्केल (1);} यह आजकल के समान है जिसे आप क्रोम में चेकबॉक्स और रेडियोबॉटन को गैर-नीला बनाने के लिए स्टाइल कर सकते हैं।

— केएस --४

Answer 3

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

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