मैं स्टाइल फॉर्म ड्रॉप डाउन सूचियों कैसे बना सकता हूं?

Question

मैंने इंटरनेट पर कहीं और व्यापक खोज की है लेकिन किसी फॉर्म में ड्रॉपडाउन सूची के ड्रॉपडाउन हिस्से को स्टाइल करने के तरीके के बारे में कुछ भी उपयोगी नहीं मिला है। मैं सही दिशा में एक सूचक की सराहना करता हूं। धन्यवाद।

Answer 1

जैसा ऊपर बताया गया है, सीधे HTML का उपयोग करना बहुत असंभव है, मेरे पास jQuery Combobox के साथ अच्छे परिणाम हुए हैं।

Answer 2

आप SELECT चयनकर्ता का उपयोग करके शैलियों को लागू कर सकते हैं या एक सेक्शन तत्व में क्लासनाम लागू कर सकते हैं। हालांकि, आप आईई < 8 के साथ मुद्दों में भाग लेंगे जैसे तत्वों की सीमाएं।

आप विकल्प चयनकर्ता का उपयोग कर विकल्पों को लक्षित कर सकते हैं।

SELECT { border: solid 1px red; font-weight: bold; } 
OPTION { background:green; font-style: italic; } 

आप एक लाल बॉर्डर के साथ एक ड्रॉप डाउन देना चाहिए बोल्ड टेक्स्ट से (यदि मानक मोड में एफएफ या IE8 का उपयोग), और विकल्प एक हरे रंग की पृष्ठभूमि के साथ इटैलिक होना चाहिए।

Answer 3

यह संभव है, लेकिन कम से कम कहने के लिए दृढ़ हो गया। आप वास्तव में अलग-अलग ब्राउज़रों में एक ड्रॉप डाउन सूची के ड्रॉप डाउन हिस्से को स्टाइल नहीं कर सकते क्योंकि वे सभी अलग-अलग तरीकों से उनका समर्थन करते हैं (मेरा मतलब वास्तव में विभिन्न समर्थन है)।

जब मेरे पास कुछ महीने पहले इस तरह की एक समस्या थी, तो मुझे पता चला कि एकमात्र समाधान जावास्क्रिप्ट का उपयोग करना था, ड्रॉप डाउन सूची को उल/ली ड्रॉप डाउन मेनू में परिवर्तित करना था, जिसे मैं शैली बना सकता था। बेशक ऐसी कई घटनाएं हैं जिन्हें एक मूल्य चुनने की तरह हैंडलिंग की आवश्यकता होती है।

सौभाग्य से JQuery के लिए एक प्लगइन है जो इसे एक छोटा काम करने की अनुमति देता है। (इस प्लगइन के लिए दिए गए ब्रेनफॉल्ट लिंक अब और काम नहीं कर रहे हैं।)

Answer 4

मैं थोड़ी देर के लिए एक ही समस्या पर काम कर रहा हूं। धारक div का उपयोग करके एक बहुत ही सरल समाधान के साथ आया जो ड्रॉपडाउन के बाद छोटा होता है। मैं जिस तरह से पसंद करता हूं उसे देखने के लिए ड्रॉपडाउन तीर प्राप्त करने के लिए मैं पृष्ठभूमि छवि का भी उपयोग करता हूं। इसे देखें http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/

आपको केवल चुनिंदा टैग और 2 सीएसएस कक्षाओं के चारों ओर एक div है।

HTML:

<div class="mainselection"> 
<select name="State" id="input7"> 
    <option></option> 
    <option value="Alabama">Alabama</option> 
    ... 
    <option value="Wisconsin">Wisconsin</option> 
    <option value="Wyoming">Wyoming</option>        
</select> 
</div> 

सीएसएस:

.mainselection { 
    overflow:hidden; 
    width:350px; 
    margin-left:35px; 
    background: url("images/dropdown_arrow.png") no-repeat #fff 319px 2px; 
    /* dropdown_arrow.png is a 31x28 image */ 
} 
select { 
    border:0; 
    background:transparent; 
    height:32px; 
    border:1px solid #d8d8d8; 
    width:350px; 
    -webkit-appearance: none; 
} 

फिर एक छोटे जावास्क्रिप्ट सत्यापन के बाद, मैं भी वर्ग div पर .dropdownbad के लिए यह एक लाल बॉर्डर देने के लिए बदल सकते हैं।

.dropdownbad { 
    border:2px solid #c13339; 
} 

डिफ़ॉल्ट और त्रुटि राज्यों यहां दिए गए हैं:

Answer 5

चूंकि यह प्रश्न पूछा गया था, ब्राउज़र तकनीक अब तक सुधार हुआ है। अब आप बिना किसी जावास्क्रिप्ट के सीएसएस का उपयोग कर एक कस्टम ड्रॉपडाउन मेनू बना सकते हैं।

इस ब्लॉग पोस्ट चेक आउट: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Answer 6

मैं अपने गाड़ी में ड्रॉपडाउन कि हल्के भूरे रंग के थे, तो चयनित नहीं है।मैं इस के साथ पाठ का रंग काला हो पा रहा था:

#customer_details ul { 
color: black !important; 
} 

सब मैं बदलने के लिए जरूरी था कि, इसलिए मैं यह नहीं कह सकते तुम कर सकते हो और क्या।

Answer 7

सीएसएस एकमात्र समाधान के लिए इस वेबसाइट की जाँच करें: http://www.htmllion.com/default-select-dropdown-style-just-css.html

HTML:

<form> 
    <select> 
     <option>CSS</option> 
     <option>HTML </option> 
     <option>HTML 5</option> 
    </select> 
</form> 

सीएसएस:

<style> 
    select { 
     border: 0 !important; /*Removes border*/ 
     -webkit-appearance: none; /*Removes default chrome and safari style*/ 
     -moz-appearance: none; /* Removes Default Firefox style*/ 
     background: #0088cc url(img/select-arrow.png) no-repeat 90% center; 
     width: 100px; /*Width of select dropdown to give space for arrow image*/ 
     text-indent: 0.01px; /* Removes default arrow from firefox*/ 
     text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/ 
     color: #FFF; 
     border-radius: 15px; 
     padding: 5px; 
     box-shadow: inset 0 0 5px rgba(000,000,000, 0.5); 
    } 
</style>