केवल CSS के साथ <विकल्प> कैसे स्टाइल करें?

Question

नोट: यह प्रश्न कस्टम ड्रॉपडाउन करने के बारे में नहीं है। यह केवल <option>CSS में चुनिंदा तत्व के भीतर स्टाइलिंग तत्वों की संभावनाओं के बारे में है

मैं क्रॉस-ब्राउज़र संगतता के साथ <option>एक <select>तत्व की शैली कैसे कर सकता हूं ? मुझे कई जावास्क्रिप्ट तरीके पता हैं, जो कि ड्रॉपडाउन को रूपांतरित करने के लिए अनुकूलित करते हैं <li>, जिसके बारे में मैं नहीं पूछ रहा हूं।

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

मैं पूछ रहा हूं कि केवल IE9 +, फ़ायरफ़ॉक्स और क्रोम के लिए संगतता के साथ सीएसएस के साथ क्या संभव हो सकता है।

मैं इस तरह से या जितना संभव हो उतना करीब होना चाहता हूं।

मैंने यहां http://jsfiddle.net/jitendravyas/juwz3/3/ की कोशिश की , लेकिन क्रोम में फ़ॉन्ट रंग को छोड़कर कोई स्टाइल नहीं दिखा, जबकि फ़ायरफ़ॉक्स कुछ और दिखाता है। Chrome में भी बॉर्डर और पैडिंग का काम कैसे प्राप्त करें?

Comments

@ मनसेक - यह केवल <option>संपूर्ण ड्रॉपडाउन के बारे में नहीं है

— जितेन्द्र व्यास

@ManseUK: मुझे यकीन नहीं है कि वही है। यह प्रश्न पूछता है कि क्या आप <select>पृष्ठ पर तत्व की उपस्थिति को स्टाइल कर सकते हैं । यह प्रश्न पूछता है कि क्या आप <option>तत्वों की सूची को स्टाइल कर सकते हैं ।

— एंडी ई

भगवान के लिए यह दो जुड़े हुए प्रश्नों में से किसी का भी डुप्लिकेट नहीं है (जो वैसे भी एक दूसरे से अलग हैं)। एक पूरी तरह से सिलेक्ट करने के लिए है न कि ऑप्शन को चुनने के लिए, जबकि यह एक ऑप्शन को स्टाइल करने के बारे में पूछता है, और दूसरे में केवल-सीएसएस / नो-जेएस की आवश्यकता नहीं है।

— मैटो

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

— Matteo

@ovokuro codepen.io/lambder/pen/NbmwRb

— लम्बाई

Answer 1

EDIT 2015 मई

अस्वीकरण: मैंने नीचे दिए गए उत्तर से स्निपेट लिया है:

महत्वपूर्ण अद्यतन!

WebKit के अलावा, फ़ायरफ़ॉक्स 35 के रूप में हम appearanceसंपत्ति का उपयोग करने में सक्षम होंगे :

कॉम्बोक्स पर मूल्य के -moz-appearanceसाथ उपयोग करना noneअब ड्रॉपडाउन बटन को हटा दें

इसलिए अब डिफ़ॉल्ट स्टाइल को छिपाने के लिए, हमारे चयनित तत्व पर निम्नलिखित नियमों को जोड़ना उतना ही आसान है:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

IE 11 समर्थन के लिए, आप [ ::-ms-expand] [१५] का उपयोग कर सकते हैं ।

select::-ms-expand { /* for IE 11 */
    display: none;
}

पुराना उत्तर

दुर्भाग्य से आप जो पूछते हैं वह शुद्ध CSS का उपयोग करके संभव नहीं है। हालांकि, यहां कुछ समान है जिसे आप एक काम के रूप में चुन सकते हैं। नीचे दिए गए लाइव कोड की जाँच करें।

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

संपादित करें

यहां वह प्रश्न है जो आपने कुछ समय पहले पूछा था। केवल जावास्क्रिप्ट के बिना सीएसएस के साथ एक <select> ड्रॉपडाउन शैली कैसे करें? जैसा कि वहां बताया गया है, केवल क्रोम में और कुछ हद तक फ़ायरफ़ॉक्स में आप जो चाहें हासिल कर सकते हैं। अन्यथा, दुर्भाग्य से, कोई स्टाइल चुनने के लिए कोई क्रॉस ब्राउज़र शुद्ध सीएसएस समाधान नहीं है।

Comments

+1 धन्यवाद यह अच्छा कोड है। लेकिन मेरे मामले में मैं के साथ करना चाहता हूँ <select>। <div>शब्दार्थ का प्रयोग सही नहीं है।

— जितेंद्र व्यास

@ जितेंद्रवैय्या, मुझे पता है, लेकिन जैसा कि मैंने उत्तर दिया, यह संभव नहीं है। आपने पहली तस्वीर में जो हासिल किया है, वह सबसे अधिक है जो आप कर सकते हैं। वें संपादित देखें। वैसे, मैंने आपके पिछले प्रश्न का उत्तर दिया था, कृपया इसे देखें।

— सावास वेदोवा

'महत्वपूर्ण अद्यतन' भाग को प्रभावित करता है कि आप optionटैग को सीएसएस के साथ स्टाइल कर सकते हैं , लेकिन आप नहीं कर सकते, आप केवल selectटैग को स्टाइल कर सकते हैं । जिसे इस उत्तर

— svnm

यहाँ उपरोक्त उदाहरण का एक जावास्क्रिप्ट संस्करण है जो कॉलबैक और कुछ अन्य उपयोगी विशेषताएं जोड़ता है: dynamdrive.com/dynamicindex1/ergodropdown.htm

— कोको

Answer 2

स्टाइलिंग विकल्प तत्वों का कोई क्रॉस-ब्राउज़र तरीका नहीं है, निश्चित रूप से आपके दूसरे स्क्रीनशॉट की सीमा तक नहीं। आप उन्हें बोल्ड बनाने में सक्षम हो सकते हैं, और फ़ॉन्ट-आकार सेट कर सकते हैं, लेकिन यह इसके बारे में होगा ...

Answer 3

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

Comments

कृपया अंतिम पैराग्राफ हटा दें - URL ऑनलाइन उपलब्ध नहीं है।

— कुमारहर्ष