क्या किसी चुनिंदा बॉक्स को स्टाइल करना संभव है? [बन्द है]

Question

मुझे एक HTML चयन बॉक्स मिला है जिसे मुझे स्टाइल करने की आवश्यकता है। मैं सिर्फ CSS का उपयोग करना पसंद करूंगा लेकिन अगर मुझे अंतराल में भरने के लिए jQuery का उपयोग करना होगा।

क्या कोई अच्छा ट्यूटोरियल या प्लगइन सुझा सकता है?

मुझे पता है, Google, लेकिन मैं पिछले दो घंटों से खोज कर रहा हूं और मुझे ऐसा कुछ नहीं मिल रहा है जो मेरी जरूरतों को पूरा करता हो।

यह होना चाहिए:

• JQuery के साथ संगत 1.3.2
• सुलभ
• विनीत
• चुनिंदा बॉक्स के हर पहलू को स्टाइल करने के मामले में पूरी तरह से अनुकूलन

क्या किसी को कुछ भी पता है जो मेरी जरूरतों को पूरा करेगा?

Comments

आप मतलब है कि आप एक अनुकूलन ड्रॉपडाउन (jquery में निर्मित) चाहते हैं, है ना? क्योंकि चुनिंदा बक्से भी ब्राउज़र ऑब्जेक्ट नहीं हैं (वे प्लेटफ़ॉर्म ऑब्जेक्ट हैं), बहुत सरल, बहुत कच्चे हैं, और आप इसे बहुत स्टाइल नहीं कर सकते हैं (आप उदाहरण के लिए सीमाओं को स्टाइल नहीं कर सकते)

— अय्याश

अच्छा स्पष्टीकरण और स्वरूपण के लिए +1!

— मनीष

चुना हुआ ध्यान देने योग्य है, लेकिन बहुत अनुकूलन योग्य नहीं है और इसमें बहुत सारे खुले मुद्दे हैं। हालांकि देखने और उपयोग करने में अच्छा लगा।

— एक पेड nerd

@ अयाश आप जो कह रहे हैं वह कुछ सिस्टम (निश्चित रूप से मैक ओएस) पर MSHTML (इंटरनेट एक्सप्लोरर और दोस्तों) और वेबकोर (सफारी) के लिए सच है। यह गेको (फ़ायरफ़ॉक्स और दोस्तों) के लिए सच नहीं है। ताकि वास्तविक समस्या यह है कि आप selectतत्वों को क्रॉस-ब्राउज़र शैली नहीं कर सकते । लेकिन अगर लोग मतभेदों के साथ जीने के लिए तैयार हैं, तो आप उन्हें स्टाइल कर सकते हैं - सीमाओं सहित ।

— पॉइंटेडर्स

@PointedEras हां, 2012 में वे कर सकते हैं, लेकिन im अनुमान लगा रहा था कि 3 साल पहले जब मैंने कहा था कि मैंने क्या कहा, मुझे पूरा यकीन है कि मैंने एक शॉट वापस दिया और यह काम नहीं किया

— अय्याश

Answer 1

मैंने वहाँ कुछ jQuery प्लगइन्स देखे हैं जो कि <select>'s <ol>' और <option>'s <li>' में बदल जाते हैं, ताकि आप इसे CSS से स्टाइल कर सकें। अपने रोल के लिए बहुत मुश्किल नहीं हो सकता।

यहां एक है: https://gist.github.com/1139558 ( यहां उसका उपयोग किया गया है , लेकिन ऐसा लगता है कि साइट नीचे है।)

इसे इस तरह उपयोग करें:

$('#myselectbox').selectbox();

इसे इस तरह से स्टाइल करें:

div.selectbox-wrapper ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.selectbox-wrapper ul li.selected { 
  background-color: #EAF2FB;
}
div.selectbox-wrapper ul li.current { 
  background-color: #CDD8E4;
}
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}

Comments

मैंने शुरू में इस संस्करण की कोशिश की, लेकिन DIV उस स्थान के सापेक्ष नहीं है जहाँ चयन बॉक्स है। इसके बजाय यह बाईं ओर कठिन तैनात है।

मैंने खुद इसका इस्तेमाल नहीं किया है। इसके लिए डेमो ( brainfault.com/demo/selectbox/0.5 ) ठीक लग रहा है। अन्य कार्यान्वयन के लिए चारों ओर देखें। मुझे पता है कि मैंने कई अन्य प्लगइन्स देखे हैं जो ऐसा करते हैं।

— मार्क ए। निकोलोसी

मैंने यह कोशिश की और कुछ समय तक काम किया जब तक मुझे पेज पर एक से अधिक नहीं डालना पड़ा। अब इसे स्टाइल करना मुश्किल है क्योंकि कुछ बेवकूफी के कारण लेखक ने यूनिक आईडी या कक्षाओं के बजाय सभी तत्वों के लिए एक ही आईडी का उपयोग करना ठीक समझा। अब मैं अपना लिखने की सोच रहा हूं ...

— जोनाथन

404 - कोई भी विचार जहां दर्पण थे?

— Moak

बस सावधान रहें कि अधिकांश चुनिंदा मेनू प्लगइन्स स्क्रीन पाठकों के लिए अप्राप्य हैं। अभी तक ऐसा नहीं मिला जो काम करता हो।

— मर्सी सौटन

Answer 2

अद्यतन: २०१३ तक मैंने देखा है कि जाँच के लायक हैं:

• चुना - गीथब पर शांत सामान, 7k + देखने वालों का भार। (टिप्पणियों में 'एक पेड nerd' द्वारा उल्लिखित)
• Select2 - चुना, चोजेन पर एक जोड़ी उपयोगी tweaks के साथ कोणीय-यूआई का हिस्सा।

हाँ!

---

2012 के रूप में सबसे हल्के, लचीले समाधानों में से एक मैंने पाया है ddSlick । साइट से प्रासंगिक (संपादित) जानकारी:

• चित्र और पाठ जोड़ता है select options
• विकल्प को आबाद करने के लिए JSON का उपयोग कर सकते हैं
• चयन पर कॉलबैक फ़ंक्शन का समर्थन करता है

और यहाँ विभिन्न मोड का पूर्वावलोकन है:

Answer 3

सीएसएस के लिए, मोज़िला सबसे अनुकूल लगता है, खासकर एफएफ 3.5+ से। वेबकिट ब्राउज़र ज्यादातर सिर्फ अपनी बात करते हैं, और किसी भी शैली की उपेक्षा करते हैं। IE बहुत सीमित है, हालांकि IE8 आपको कम से कम स्टाइल बॉर्डर कलर / चौड़ाई देता है।

निम्नलिखित वास्तव में एफएफ 3.5+ में काफी अच्छा लग रहा है (अपनी रंग वरीयता को उठाते हुए, निश्चित रूप से):

select {
    -moz-border-radius: 4px;
    -moz-box-shadow: 1px 1px 5px #cfcfcf inset;
    border: 1px solid #cfcfcf;
    vertical-align: middle;
    background-color: transparent;
}
option {
    background-color: #fef5e6;
    border-bottom: 1px solid #ebdac0;
    border-right: 1px solid #d6bb86;
    border-left: 1px solid #d6bb86;
}
option:hover {
    cursor: pointer;
}

लेकिन जब IE की बात आती है, तो आपको विकल्प पर पृष्ठभूमि रंग को अक्षम करना होगा यदि आप इसे प्रदर्शित नहीं करना चाहते हैं जब विकल्प मेनू नीचे नहीं खींचा जाता है। और, जैसा कि मैंने कहा, वेबकिट अपनी बात करता है।

Answer 4

हमने ऐसा करने का एक सरल और सभ्य तरीका खोजा है। यह क्रॉस-ब्राउज़र है, अपमानजनक है, और एक फॉर्म पोस्ट को नहीं तोड़ता है। सबसे पहले सेलेक्ट बॉक्स के ऑप्सिटी को 0 पर सेट करें।

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

ऐसा है तो आप अभी भी उस पर क्लिक कर सकते हैं

फिर चयन बॉक्स के समान आयामों के साथ div बनाएं। डिव को पृष्ठभूमि के रूप में चयन बॉक्स के नीचे रखना चाहिए। इसे प्राप्त करने के लिए {स्थिति: निरपेक्ष} और z-index का उपयोग करें।

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

जावास्क्रिप्ट के साथ div के भीतर HTML अद्यतन करें। आसान jQuery के साथ:

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

बस! सिलेक्ट बॉक्स के बजाय अपनी डिव को स्टाइल करें। मैंने उपरोक्त कोड का परीक्षण नहीं किया है, इसलिए आपको शायद इसे ट्विक करने की आवश्यकता होगी। लेकिन उम्मीद है कि आपको जिन्न मिलेगा।

मुझे लगता है कि यह समाधान {-बेटक-उपस्थिति: कोई नहीं;} धड़कता है। ब्राउज़र को सबसे अधिक क्या करना चाहिए, फार्म तत्वों के साथ बातचीत तय है, लेकिन निश्चित रूप से यह नहीं है कि साइट डिजाइन के रूप में पेज पर शुरू में उनके प्रदर्शन कैसे हुए।

Answer 5

यहाँ एक छोटा सा प्लग है अगर आप ज्यादातर चाहते हैं

• एक तत्व की बंद स्थिति को अनुकूलित करने के लिए पागल होselect
• लेकिन खुले राज्य में , आप विकल्प चुनने के लिए एक बेहतर देशी अनुभव का समर्थन करते हैं (स्क्रॉल व्हील, एरो कीज़, टैब फ़ोकस, ajax संशोधनों के लिए options, उचित zindex, आदि)
• गन्दा ul, liउत्पन्न मार्कअप को नापसंद करते हैं

फिर jquery.yaselect.js एक बेहतर फिट हो सकता है । सीधे शब्दों में:

$('select').yaselect();

और अंतिम मार्कअप है:

<div class="yaselect-wrap">
  <div class="yaselect-current"><!-- current selection --></div>
</div>
<select class="yaselect-select" size="5">
  <!-- your option tags -->
</select>

इसे github.com पर देखें

Comments

यह बहुत बढ़िया है और मोबाइल उपकरणों पर भी काम करता है :)

— उड़ान भेड़

IOS पर काम करता है। क्षमा करें, मेरे पास Android आदि की पहुंच नहीं है?

— चोन्कैट

यह सवाल नहीं था, यह प्रशंसा थी। यह मेरे Android पर ठीक काम करता है ।

— उड़ान भेड़

Answer 6

आप सीएसएस के साथ कुछ हद तक स्टाइल कर सकते हैं

select {
    background: red;
    border: 2px solid pink;
}

लेकिन यह पूरी तरह से ब्राउज़र पर निर्भर है। कुछ ब्राउज़र ज़िद्दी हैं।

हालाँकि, यह केवल आपको अभी तक मिलेगा, और यह हमेशा बहुत अच्छा नहीं लगता है। पूर्ण नियंत्रण के लिए, आपको अपने स्वयं के एक विजेट के साथ jQuery के माध्यम से एक चयन को बदलने की आवश्यकता होगी जो एक चयन बॉक्स की कार्यक्षमता का अनुकरण करता है। सुनिश्चित करें कि जब JS अक्षम है, तो एक सामान्य चयन बॉक्स अपनी जगह पर है। यह अधिक उपयोगकर्ताओं को आपके फ़ॉर्म का उपयोग करने की अनुमति देता है, और यह पहुंच के साथ मदद करता है।

Answer 7

अधिकांश ब्राउज़र css का उपयोग करके चुनिंदा टैग को अनुकूलित करने का समर्थन नहीं करते हैं। लेकिन मुझे यह जावास्क्रिप्ट मिलती है जिसका उपयोग चुनिंदा टैग को स्टाइल करने के लिए किया जा सकता है। लेकिन हमेशा की तरह IE ब्राउज़रों के लिए कोई समर्थन नहीं है।

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ मैंने इस पर एक त्रुटि देखी कि Onchange विशेषता काम नहीं करती है

Answer 8

मुझे बस यही मिला जो वास्तव में अच्छा लगता है।

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

Answer 9

यदि jQuery के बिना एक समाधान है। एक लिंक जहां आप एक काम करने का उदाहरण देख सकते हैं: http://www.letmaier.com/_selectbox/select_general_code.html (अधिक सीएसएस के साथ स्टाइल)

मेरे हल का स्टाइल-सेक्शन:

<style>
#container { margin: 10px; padding: 5px; background: #E7E7E7; width: 300px; background: #ededed); }
#ul1 { display: none; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; }
#container a {  color: #333333; text-decoration: none; }
#container ul li {  padding: 3px;   padding-left: 0px;  border-bottom: 1px solid #aaa;  font-size: 0.8em; cursor: pointer; }
#container ul li:hover { background: #f5f4f4; }
</style>

अब बॉडी-टैग के अंदर HTML- कोड:

<form>
<div id="container" onMouseOver="document.getElementById('ul1').style.display = 'block';" onMouseOut="document.getElementById('ul1').style.display = 'none';">
Select one entry: <input name="entrytext" type="text" disabled readonly>
<ul id="ul1">
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 1'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 1</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 2'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 2</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 3'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 3</a></li>
</ul>
</div>
</form>

Comments

कृपया केवल एक को जोड़ने के बजाय एक उदाहरण प्रदान करें।

— सभी कार्यकर्ता

आपके अनुरोध के अनुसार मैंने अपना उत्तर बदल दिया।

— क्रिस्टोफ लेटमैयर

अब बहुत अच्छा लग रहा है। BTW, एक कामकाजी उदाहरण या उदाहरण दिखाने वाले स्रोत से जोड़ने में कुछ भी गलत नहीं है (यह काफी मददगार हो सकता है)। लेकिन अनिवार्य रूप से लिंक समय के साथ अमान्य हो जाते हैं, इसलिए यह हमेशा वांछित है कि उत्तर में आवश्यक जानकारी प्रदान करें (जो आपने प्रदान की) तब भी जब उपयोगी लिंक प्रदान किए जाते हैं।

— सभी श्रमिक आवश्यक

ठीक है, समझ गया ... :-) मैं पूरी कोशिश करूँगा कि इस लिंक को जीवित रखा जा सके ...

— क्रिस्टोफ़ लेटमैयर

Answer 10

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

<select class="demo">
  <option value="value1">Label 1</option>
  <option value="value2" selected>Label 2</option>
  <option value="value3">Label 3</option>
</select>

चल रहा है styleSelect('select.demo')इस प्रकार एक स्टाइल का चयन करें बॉक्स बनाने होगा:

Comments

साइड नोट, IE9 और उससे नीचे के लिए कोई समर्थन नहीं

— सितंबर को बेन सेवार्ड्स

Answer 11

मैंने कुछ दिनों पहले jQuery प्लगइन, SelectBoxIt बनाया है । यह एक नियमित HTML चयन बॉक्स के व्यवहार की नकल करने की कोशिश करता है, लेकिन आपको jQueryUI का उपयोग करके चयनित बॉक्स को स्टाइल और एनिमेट करने की भी अनुमति देता है। एक बार देखिए और मुझे बताइए कि आप क्या सोचते हैं।

http://www.selectboxit.com

Answer 12

आपको ikSelect जैसे कुछ jQuery प्लगइन का उपयोग करने का प्रयास करना चाहिए ।

मैंने इसे बहुत ही अनुकूलन योग्य बनाने की कोशिश की लेकिन उपयोग में आसान है।

http://github.com/Igor10k/ikSelect

Answer 13

यह पुराना लगता है, लेकिन यहां एक बहुत ही दिलचस्प प्लगइन है - http://uniformjs.com

Answer 14

यह मेनू में twitter-bootstrapबारी करने के लिए शैलियों का उपयोग करता है https://github.com/silviomoreto/bootstrap-selectselectdropdown

Answer 15

सरल समाधान एक div के अंदर अपने चुनिंदा बॉक्स है, और अपने डिजाइन से मेल खाते div शैली। सेट अपारदर्शिता: 0 सेलेक्ट बॉक्स के लिए, यह सेलेक्ट बॉक्स को अदृश्य बना देगा। JQuery के साथ एक स्पैन टैग डालें और यदि उपयोगकर्ता परिवर्तन मान को नीचे गिराता है तो गतिशील रूप से इसका मान बदलें। कोड स्पष्टीकरण के साथ इस ट्यूटोरियल में दिखाया गया कुल प्रदर्शन । आशा है कि यह आपकी समस्या को हल कर देगा।

JQuery कोड इस तरह दिखता है।

 <script>
   $(document).ready(function(){
     $('.dropdown_menu').each(function(){
       var baseData = $(this).find("select option:selected").html();
       $(this).prepend("<span>" + baseData + "</span>");
     });

     $(".dropdown_menu select").change(function(e){
       var nodeOne = $(this).val();
       var currentNode = $(this).find("option[value='"+ nodeOne +"']").text();
       $(this).parents(".dropdown_menu").find("span").text(currentNode);
     });
   });
</script>