दिलचस्प पोस्ट
सूची में एक गोली का रंग बदलने का एक आसान तरीका है? "शताब्दी के बिना वर्ष" के रूप में उपलब्ध वर्ष के साथ सही शताब्दी जोड़ें,% y जावा में पदोन्नति? सी # वेबब्रोजर नियंत्रण – फॉर्म InvoxMember ("क्लिक करें") का उपयोग कर कार्य नहीं सबमिट करें विशेष सदस्यों के खाका विशेषज्ञता? आधार वर्ग को व्युत्पन्न कक्षा अजगर (या विस्तारित वर्गों का अधिक अजगर) SQL सर्वर: गलत संस्करण 661 संलग्न करें जावा में किसी भी तारीख को पार्स करें दुर्बल रूप से टाइप किए गए भाषाओं के बारे में स्पष्ट विरोधाभास पर स्पष्टीकरण की मांग करना JSlint त्रुटि 'एक लूप के भीतर कार्य न करें।' केवल जावास्क्रिप्ट के बारे में प्रश्न करता है सीएसएस पूर्ण स्थिति मार्जिन-बाएं के साथ काम नहीं करेगी: ऑटो मार्जिन-राइट: ऑटो रेगेक्स ईमेल सत्यापन सी # में बंद करने के लिए पुस्तकालय / एपीआई की सलाह देते हैं मिश्रित अल्फा / संख्यात्मक सरणी सॉर्ट करें एसक्यूएल में, गिनती (स्तंभ) और गिनती (*) के बीच अंतर क्या है?

क्या यह एक चुनिंदा शैली के लिए संभव है?

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

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

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

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

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

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

वेब के समाधान से एकत्रित समाधान "क्या यह एक चुनिंदा शैली के लिए संभव है?"

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

यहां एक है: 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; } 

अद्यतन: 2013 के रूप में मैंने देखा है कि ये दोनों लायक हैं:

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

हाँ!


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

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

और यहां विभिन्न तरीकों का एक पूर्वावलोकन है:

यहां छवि विवरण दर्ज करें

सीएसएस के लिए के रूप में, मोज़िला सबसे अनुकूल लगता है, खासकर एफएफ 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; } 

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

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

 .select { opacity : 0; width: 200px; height: 15px; } <select class='select'> <option value='foo'>bar</option> </select> 

यह इसलिए है कि आप इस पर अभी भी क्लिक कर सकते हैं

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

 .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> 

जावा के साथ डिव का आंतरिक एचटीएमएल अपडेट करें JQuery के साथ सहजता:

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

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

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

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

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

तो 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 पर देखें

आप अपने द्वारा सीएसएस के साथ कुछ हद तक शैली कर सकते हैं

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

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

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

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

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

मैंने यह पाया जो वास्तव में अच्छा लगता है

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

यदि 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> 

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

 <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') शैली का चयन करें styleSelect('select.demo') एक स्टाइल वाला चयन बॉक्स निम्नानुसार बना देगा:

यहां छवि विवरण दर्ज करें

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

http://www.selectboxit.com

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

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

http://github.com/Igor10k/ikSelect

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

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

सरल समाधान एक डिव के अंदर अपने चयन बॉक्स ताना है, और शैली अपने डिजाइन से मिलान 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>