2012-01-31 6 views
9

पर ड्रॉपडाउन बोल्ड का चयन करें एक चुनिंदा ड्रॉपडाउन पर, मुझे कुछ आइटम 'मजबूत/बोल्ड' बनाने की आवश्यकता है।सीएसएस कुछ <option> के

मैं यह कैसे कर सकता हूं?

मैं क्या आदर्श की आवश्यकता का उदाहरण:

<option value="#"><strong>Andorra</strong></option> 
<option value="#">--Grandvalira</option> 
<option value="#">--Vallnord</option> 
<option value="#"><strong>Austria</strong></option> 
<option value="#">--Amadé</option> 
<option value="#">--Bad Kleinkirchheim</option> 
<option value="#">--Mallnitz</option> 
+0

ऑप्टगॉप्स के लिए व्यवस्थित करें या "नकली" जेएस/सीएसएस आधारित ड्रॉप डाउन बनाएं - यहां तक ​​कि संभावित डुप्लिकेट: http://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a -html-select – Hannes

उत्तर

5

आप इस्तेमाल कर सकते हैं :nth-child(N)

option:nth-child(1), option:nth-child(4) { 
    font-weight:bold; 
} 

डेमो:http://jsfiddle.net/Sotiris/sqshN/

http://reference.sitepoint.com/css/pseudoclass-nthchild

+6

इसके लिए धन्यवाद ... यह बहुत अच्छा है, लेकिन क्रोम में काम नहीं करता है (फ़ायरफ़ॉक्स में ठीक है) – user991830

+2

@ user991830 'विकल्प' तत्वों के लिए बोल्ड का समर्थन नहीं करता है, लेकिन छद्म-वर्ग काम करता है। इस उदाहरण को जांचें जो रंग बदलता है http://jsfiddle.net/sqshN/1/ – Sotiris

+0

[विंडोज़] क्रोम ने ओएसई एपीआई का उपयोग करने के बाद से ड्रॉप डाउन स्टाइल की अनुमति नहीं दी है। मुझे ऐसा कुछ समझने की कोशिश करते समय एक विसंगति याद है। – lpd

26

आप वास्तव में नहीं कर सकता।

निकटतम बात (यदि आप एक बोल्ड आइटम नहीं चुन सकते हैं)

<optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    </optgroup> 
    <optgroup label="German Cars"> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
    </optgroup> 

कौन सा आप इस देता है: enter image description here

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

तुम भी निर्माण कर सकते हैं अपना खुद का एक लेकिन यह एक इनपुट टैग इनपुट नहीं होगा (आपको अपने स्वयं के इनपुट का उपयोग करना चाहिए)।

+1

+1 मैं नहीं कहूंगा कि "आप वास्तव में नहीं कर सकते" (@Sotiris द्वारा जवाब देखें), लेकिन मुझे लगता है कि यह उत्तर देने वाले प्रश्नों के लिए सबसे उपयुक्त उत्तर है क्योंकि ऐसा लगता है कि उन्हें वास्तव में समूह का उपयोग करना चाहिए –

+0

@MyHeadHurts के साथ शुरू करने के लिए, अगर यह सभी ब्राउज़र में काम नहीं कर सकता - मैं इसका उपयोग नहीं करता हूं। आपको टैट की तरह वेब डेवलपर के रूप में भी सोचना चाहिए। –

+0

हालांकि मैं इसके साथ अधिकांश स्तरों पर सहमत हूं, लेकिन मुझे क्लाइंट को यह परिभाषित करने में प्रसन्नता हो रही है कि वे कितनी देर तक समर्थन करना चाहते हैं। इसके अलावा, इसे प्राप्त करने का एक 2.0 तरीका होगा - कम से कम –

-1

यह भी काम करता है (फ़ायरफ़ॉक्स 50 और क्रोम 55 पर अधिक जानकारी और इस छद्म वर्ग के लिए ब्राउज़र समर्थन का पता लगाएं)। आइटम 3 और 5 बोल्ड

<style> 
    .bld {font-weight:bold;} 
    </style> 
    <select> 
    <option value = 1>Kanakangi 
    <option value = 2>Ratnangi 
    <option class = bld value = 8>Hanumatthodi 
    <option value = 9>Dhenuka 
    <option class = bld value = 15>Mayamalavagowla 
    <option value = 16>Chakravaaham 
    </select> 
+0

यह काम नहीं करता है। –

+0

यह काम करता है, बस पहले परीक्षण करें। –

0

में दिखाए गए हैं आप इसे jQuery के साथ कर सकते हैं।

$('#Your select').append($("<option></option>").attr.css("font-weight" , "bold").html("Bold Text")); 

आपको यह निर्धारित करने के लिए कुछ तर्क जोड़ना होगा कि कौन से विकल्प बोल्ड किए गए हैं, जाहिर है।

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^