दिलचस्प पोस्ट
जावा में अराय.सस्टिस्ट (एरे) के बीच का अंतर नए अर्रेइस्ट <इंटीजर> (Arrays.asList (ia)) बनाम पीडीओ पैरामाइसेज किए गए प्रश्न – नामित प्लेसहोल्डर? अनुक्रम पैरामीटर का पता लगाने का सही तरीका है? JSP फ़ाइलों में जावा कोड से बचने के लिए कैसे? आईओएस: ऑटो लेआउट में मल्टी-लाइन यूआईएलबल क्रिप्टिक "स्क्रिप्ट त्रुटि।" क्रोम और फ़ायरफ़ॉक्स में जावास्क्रिप्ट में सूचना दी आप जावा उप-वर्ग में किसी विधि की दृश्यता को कम क्यों नहीं कर सकते? JasperReports में स्थिति के आधार पर टेक्स्ट फ़ील्ड डेटा रंग (अग्रभूमि रंग) बदलें बैबल 6.x में डिफ़ॉल्ट निर्यात मूल्य () की आवश्यकता नहीं हो सकती सरणी को अपवाद करने के लिए संकेतक में क्षय नहीं करना चाहिए? 5 साल बाद, क्या "सबसे तेज़ संभावित सी ++ प्रतिनिधि" से बेहतर कुछ है? PostgreSQL इंडेक्स किए गए कॉलम पर अनुक्रमिक स्कैन क्यों करता है? प्रस्तुत करने के लिए फार्म ताज़ा पृष्ठ रोकें जावा निरर्थक जांच करें कि .equals () के बजाय == का उपयोग क्यों करें जावा का उपयोग करते हुए मैं अपने ओएसआईएस के बीटास को कैसे देख सकता हूं ?? (जेएसएसई, ओएसचर्च नहीं)

कैसे शैली के साथ एक जावास्क्रिप्ट के बिना सीएसएस के साथ <select> ड्रॉपडाउन?

क्या एक <select> ड्रॉपडाउन शैली का सीएसएस-एकमात्र तरीका है?

किसी भी जावास्क्रिप्ट के बिना, मुझे मैन्युअल रूप से संभव के रूप में <select> फ़ॉर्म शैली की आवश्यकता है सीएसएस में ऐसा करने के लिए मैं किस गुण का उपयोग कर सकता हूं?

यह कोड सभी प्रमुख ब्राउज़रों के साथ संगत होना चाहिए:

  • इंटरनेट एक्सप्लोरर 6,7 और 8
  • फ़ायरफ़ॉक्स
  • सफारी

मुझे पता है कि मैं इसे जावास्क्रिप्ट के साथ बना सकता हूं: उदाहरण

और मैं साधारण स्टाइल के बारे में बात नहीं कर रहा हूँ मैं जानना चाहता हूं, सबसे अच्छा हम सीएसएस के साथ ही क्या कर सकते हैं

मुझे स्टैक ओवरफ्लो पर समान प्रश्न मिले

और Doctype.com पर यह एक

वेब के समाधान से एकत्रित समाधान "कैसे शैली के साथ एक जावास्क्रिप्ट के बिना सीएसएस के साथ <select> ड्रॉपडाउन?"

यहां 3 समाधान दिए गए हैं:

समाधान # 1 – उपस्थिति: कोई नहीं – यानी 10-11 वर्कअराउंड ( डेमो ) के साथ

डिफ़ॉल्ट तीर सेट appearance: none को छिपाने के लिए appearance: none चुनें तत्व पर appearance: none , फिर background-image साथ अपना स्वयं का कस्टम तीर जोड़ें

 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* remove default arrow */ background-image: url(...); /* add custom arrow */ } 

ब्राउज़र समर्थन:

appearance: none भी बहुत अच्छा ब्राउज़र समर्थन नहीं है ( caniuse ) – I11 के अलावा- और फ़ायरफ़ॉक्स 34-

हम इस तकनीक को सुधार सकते हैं और जोड़कर I10 और ie11 के लिए समर्थन जोड़ सकते हैं

 select::-ms-expand { display: none; /* hide the default arrow in ie10 and ie11 */ } 

अगर 9 एक चिंता का विषय है – हमारे पास डिफ़ॉल्ट तीर को हटाने का कोई तरीका नहीं है (जिसका मतलब होगा कि अब हमारे पास दो तीर होंगे), लेकिन, हम एक चमकदार IE9 चयनकर्ता का उपयोग कम से कम हमारे कस्टम तीर को हटा सकते हैं – डिफ़ॉल्ट चयन तीर को छोड़कर बरकरार।

 /* target Internet Explorer 9 to undo the custom arrow */ @media screen and (min-width:0\0) { select { background-image:none\9; padding: 5px\9; } } 

सभी एक साथ:

 select { margin: 50px; border: 1px solid #111; background: transparent; width: 150px; padding: 5px 35px 5px 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee; } /* CAUTION: IE hackery ahead */ select::-ms-expand { display: none; /* remove default arrow in IE 10 and 11 */ } /* target Internet Explorer 9 to undo the custom arrow */ @media screen and (min-width:0\0) { select { background:none\9; padding: 5px\9; } } 
 <select> <option>Apples</option> <option selected>Pineapples</option> <option>Chocklate</option> <option>Pancakes</option> </select> 

यह संभव है, लेकिन दुर्भाग्य से ज्यादातर वेबकिट-आधारित ब्राउज़रों में हम जितनी भी हो, डेवलपर्स की आवश्यकता होती है। क्रोम विकल्प पैनल से इकट्ठा किए गए सीएसएस स्टाइल का उदाहरण यहां निर्मित डेवलपर टूल्स इंस्पेक्टर के माध्यम से है, जो आधुनिक ब्राउज़र में वर्तमान में समर्थित सीएसएस गुणों से मेल खाती है:

 select { -webkit-appearance: button; -moz-appearance: button; -webkit-user-select: none; -moz-user-select: none; -webkit-padding-end: 20px; -moz-padding-end: 20px; -webkit-padding-start: 2px; -moz-padding-start: 2px; background-color: #F07575; /* fallback color if gradients are not supported */ background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */ background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Fx (3.6 to 15) */ background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/ background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */ background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */ background-position: center right; background-repeat: no-repeat; border: 1px solid #AAA; border-radius: 2px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); color: #555; font-size: inherit; margin: 0; overflow: hidden; padding-top: 2px; padding-bottom: 2px; text-overflow: ellipsis; white-space: nowrap; } 

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

सबसे महत्वपूर्ण हिस्सा appearance संपत्ति है, जो तत्व के व्यवहार में परिवर्तन करता है।

यह लगभग सभी वेबकिट-आधारित ब्राउज़र में पूरी तरह से काम करता है, जिसमें मोबाइल वाले शामिल हैं, हालांकि गीको appearance साथ-साथ वेबकिट का समर्थन नहीं करता है, ऐसा लगता है

चयन तत्व और इसकी ड्रॉपडाउन विशेषता शैली के लिए मुश्किल है

क्रिस हेल्मैन द्वारा चयनित तत्वों के लिए शैली विशेषताओं की पुष्टि करता है कि रयान डोहेरी ने पहले जवाब पर एक टिप्पणी में कहा था:

"चयनित तत्व ऑपरेटिंग सिस्टम का हिस्सा है, न कि ब्राउज़र क्रोम। इसलिए, यह शैली के लिए बहुत ही अविश्वसनीय है, और यह जरूरी नहीं कि किसी भी तरह की कोशिश करें।"

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

सफारी और Google क्रोम फिक्स :

 select { -webkit-appearance: none; } 

हालांकि, यह ड्रॉपडाउन तीर को निकालता है। आप किसी पृष्ठभूमि, नकारात्मक मार्जिन के साथ निकटतम div का उपयोग करके एक ड्रॉपडाउन तीर जोड़ सकते हैं या ड्रॉपडाउन को चुनने पर पूरी तरह से तैनात कर सकते हैं।

* अधिक जानकारी और अन्य चर सीएसएस संपत्ति में उपलब्ध हैं: -webkit-appearance

<select> tags को सीएसएस के माध्यम से स्टाइल किया जा सकता है, जैसे किसी ब्राउज़र में दिए गए किसी एचटीएमएल पेज पर किसी अन्य HTML तत्व का। नीचे एक (अत्यधिक सरल) उदाहरण है जो पृष्ठ पर एक चयनित तत्व की स्थिति बनाएगा और नीले रंग के विकल्पों के पाठ को प्रस्तुत करेगा।

उदाहरण HTML फ़ाइल (selectExample.html):

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Select Styling</title> <link href="selectExample.css" rel="stylesheet"> </head> <body> <select id="styledSelect" class="blueText"> <option value="apple">Apple</option> <option value="orange">Orange</option> <option value="cherry">Cherry</option> </select> </body> </html> 

उदाहरण सीएसएस फ़ाइल (selectExample.css):

 /* All select elements on page */ select { position: relative; } /* Style by class. Effects the text of the contained options. */ .blueText { color: #0000FF; } /* Style by id. Effects position of the select drop down. */ #styledSelect { left: 100px; } 

ब्लॉग पोस्ट कैसे सीएसएस फार्म ड्रॉप डाउन शैली नहीं जावास्क्रिप्ट मेरे लिए काम करता है, लेकिन यह ओपेरा में विफल रहता है हालांकि:

 select { border: 0 none; color: #FFFFFF; background: transparent; font-size: 20px; font-weight: bold; padding: 2px 10px; width: 378px; *width: 350px; *background: #58B14C; } #mainselection { overflow: hidden; width: 350px; -moz-border-radius: 9px 9px 9px 9px; -webkit-border-radius: 9px 9px 9px 9px; border-radius: 9px 9px 9px 9px; box-shadow: 1px 1px 11px #330033; background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C; } <div id="mainselection"> <select> <option>Select an Option</option> <option>Option 1</option> <option>Option 2</option> </select> </div> 
 select { outline: 0; overflow: hidden; height: 30px; background: #2c343c; color: #747a80; border: #2c343c; padding: 5px 3px 5px 10px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 10px; } select option {border: 1px solid #000; background: #010;} 

मुझे इस सटीक समस्या थी, सिवाय मैं छवियों का उपयोग नहीं कर सका और ब्राउज़र समर्थन द्वारा सीमित नहीं था। यह «कल्पना पर होना चाहिए» और भाग्य के साथ हर जगह अंततः काम करना शुरू करना चाहिए

यह स्तरित घुमाए गए पृष्ठभूमि परतों का उपयोग एक ड्रॉपडाउन तीर को «कट आउट» करने के लिए करता है, क्योंकि छद्म तत्व तत्वों के चयन के लिए काम नहीं करेंगे। अपने पसंदीदा रंग के साथ «hotpink» बदलें- मैं एक चर का उपयोग करता हूँ

 select { font: 400 12px/1.3 "Helvetica Neue", sans-serif; -webkit-appearance: none; appearance: none; border: 1px solid hotpink; line-height: 1; outline: 0; color: hotpink; border-color: hotpink; padding: 0.65em 2.5em 0.55em 0.75em; border-radius: 3px; background: linear-gradient(hotpink, hotpink) no-repeat, linear-gradient(-135deg, rgba(255,255,255,0) 50%, white 50%) no-repeat, linear-gradient(-225deg, rgba(255,255,255,0) 50%, white 50%) no-repeat, linear-gradient(hotpink, hotpink) no-repeat; background-color: white; background-size: 1px 100%, 20px 20px, 20px 20px, 20px 60%; background-position: right 20px center, right bottom, right bottom, right bottom; } 
 <select> <option>So many options</option> <option>...</option> </select> 

अगर शैली पूरी तरह से कस्टम विजेट का उपयोग कर एक महत्वपूर्ण समस्या है, तो ब्लॉग पोस्ट में वर्णित एक जैसे, सीएसएस और jQuery के साथ एक ड्रॉप डाउन को रेनवेट करना

ये एक ऐसा संस्करण है जो सभी आधुनिक ब्राउज़रों में काम करता है। कुंजी appearance:none का उपयोग कर रहा है appearance:none जो डिफ़ॉल्ट स्वरूपण को निकालता है चूंकि सभी स्वरूपण समाप्त हो चुके हैं, इसलिए आपको उस तीर में वापस जोड़ना होगा जो नेत्रहीन इनपुट से चयन को अलग करता है।

कार्य करना उदाहरण: https://jsfiddle.net/gs2q1c7p/

 select:not([multiple]) { -webkit-appearance: none; -moz-appearance: none; background-position: right 50%; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=); padding: .5em; padding-right: 1.5em } #mySelect { border-radius: 0 } 
 <select id="mySelect"> <option>Option 1</option> <option>Option 2</option> </select> 

मुझे बूटस्ट्रैप का उपयोग करते हुए आपके मामले में मिला। यह सरल समाधान है जो काम करता है:

 select.form-control { -moz-appearance: none; -webkit-appearance: none; appearancce: none; background-position: right center; background-repeat: no-repeat; background-size: 1ex; background-origin: content-box; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB+PC+Cjwvc3ZnPgo="); } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <section class="container"> <form class="form-horizontal"> <select class="form-control"> <option>One</option> <option>Two</option> </select> </form> </section> 

हाँ। आप किसी भी एचटीएमएल तत्व को इसके टैग नाम से शैली में रख सकते हैं, जैसे:

 select { font-weight: bold; } 

बेशक, आप किसी भी अन्य तत्व की तरह सीएसएस क्लास का भी इस्तेमाल कर सकते हैं:

 <select class="important"> <option>Important Option</option> <option>Another Important Option</option> </select> <style type="text/css"> .important { font-weight: bold; } </style> 

select तत्वों की सीमाओं और तीर को क्रॉप करने के लिए clip प्रॉपर्टी का उपयोग करें, फिर अपनी स्वयं की प्रतिस्थापन शैलियों को आवरण में जोड़ें:

  <!DOCTYPE html> <html> <head> <style> select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; } body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; } </style> </head> <span> <select> <option value="">Alpha</option> <option value="">Beta</option> <option value="">Charlie</option> </select> </span> </html> 

इस तत्व को संपादित करना अनुशंसित नहीं है, लेकिन अगर आप इसे किसी भी अन्य HTML तत्व की तरह देखना चाहते हैं तो

उदाहरण संपादित करें:

 /*Edit select*/ select { /*css style here*/ } /*Edit option*/ option { /*css style here*/ } /*Edit selected option*/ /*element attr attr value*/ option[selected="selected"] { /*css style here*/ } <select> <option >Something #1</option> <option selected="selected">Something #2</option> <option >Something #3</option> </select> 

एक बहुत अच्छा उदाहरण है जो उपयोग करता है :after और :before चाल करने :before स्टाइलिंग का चयन बॉक्स में है CSS3 | CSSDeck

आप निश्चित रूप से स्टाइलिंग चयन, ऑप्टसमूह और सीएसएस के साथ विकल्पों में ऐसा करना चाहिए। कई मायनों में, पृष्ठभूमि-रंग और रंग केवल वही होते हैं, जिन्हें आपको आमतौर पर स्टाइल विकल्प की आवश्यकता होती है, न कि पूरे चयन का।

इंटरनेट एक्सप्लोरर 10 के रूप में, आप ::-ms-expand छद्म तत्व चयनकर्ता शैली का उपयोग कर सकते हैं, और ड्रॉप डाउन तीर तत्व का उपयोग कर सकते हैं।

 select::-ms-expand { display:none; /* or visibility: hidden; to keep it's space/hitbox */ } 

शेष स्टाइल अन्य ब्राउज़रों के समान होना चाहिए।

यहां डेनल्टी के जेएसफ़ाल्ड का एक बुनियादी फोर्क है जो आईई 10 के लिए समर्थन पर निर्भर करता है

इस चर्चा से मेरे पसंदीदा विचारों के आधार पर यहां एक समाधान है यह किसी भी अतिरिक्त मार्कअप के बिना एक तत्व को स्टाइल करने की अनुमति देता है

आईई 8/9 के लिए सुरक्षित फ़ॉलबैक के साथ IE10 + काम करता है इन ब्राउज़रों के लिए एक चेतावनी यह है कि पृष्ठभूमि छवि को तैनात किया जाना चाहिए और वह देशी विस्तार नियंत्रण के पीछे छिपाने के लिए पर्याप्त होगा।

एचटीएमएल

 <select name='options'> <option value='option-1'>Option 1</option> <option value='option-2'>Option 2</option> <option value='option-3'>Option 3</option> </select> 

एससीएसएस

 body { padding: 4em 40%; text-align: center; } select { $bg-color: lightcyan; $text-color: black; appearance: none; // using -prefix-free http://leaverou.github.io/prefixfree/ background: { color: $bg-color; image: url("http://img.hiwab.com/html/caret--down-15.png"); position: right; repeat: no-repeat; } border: { color: mix($bg-color, black, 80%); radius: .2em; style: solid; width: 1px; right-color: mix($bg-color, black, 60%); bottom-color: mix($bg-color, black, 60%); } color: $text-color; padding: .33em .5em; width: 100%; } // Removes default arrow for IE10+ // IE 8/9 get dafault arrow which covers caret image // as long as caret image is small than and positioned // behind default arrow select::-ms-expand { display: none; } 

Codepen

http://codepen.io/ralgh/pen/gpgbGx

आधुनिक ब्राउज़रों में यह सीएसएस में <select> में शैली के लिए अपेक्षाकृत दर्द रहित है appearance: none साथ appearance: none एकमात्र मुश्किल हिस्सा तीर की जगह नहीं है (यदि वह है जो आप चाहते हैं)। यहां एक समाधान है जो एक इनलाइन data: का उपयोग करता है data: सार्ड-टेक्स्ट एसवीजी के साथ यूआरआई:

 select { -moz-appearance: none; -webkit-appearance: none; appearance: none; background-repeat: no-repeat; background-size: 0.5em auto; background-position: right 0.25em center; padding-right: 1em; background-image: url("data:image/svg+xml;charset=utf-8, \ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \ <polygon points='0,0 60,0 30,40' style='fill:black;'/> \ </svg>"); } 
 <select> <option>Option 1</option> <option>Option 2</option> </select> <select style="font-size: 2rem;"> <option>Option 1</option> <option>Option 2</option> </select> 
 label { position: relative; display: inline-block; } select { display: inline-block; padding: 4px 3px 5px 5px; width: 150px; outline: none; color: black; border: 1px solid #C8BFC4; border-radius: 4px; box-shadow: inset 1px 1px 2px #ddd8dc; background-color: lightblue; } 

यह चयनित तत्वों के लिए एक पृष्ठभूमि रंग का उपयोग करता है और मैंने छवि हटा दी है ..

एक सीएसएस और एचटीएमएल ही समाधान

मुझे क्रोम, फ़ायरफ़ॉक्स और IE11 के साथ संगत लगता है लेकिन कृपया अन्य वेब ब्राउज़र के बारे में अपनी प्रतिक्रिया छोड़ दें।

जैसा कि @ डायनल्ड के उत्तर से सुझाव दिया गया है, मैं अपने चयन को एक div में (एक्स-ब्राउज़र संगतता के लिए दो डिवा भी) लपेटता है ताकि अपेक्षित व्यवहार प्राप्त हो सके।

http://jsfiddle.net/bjap2/ देखें

HTML:

 <div class="sort-options-wrapper"> <div class="sort-options-wrapper-2"> <select class="sort-options"> <option value="choiceOne">choiceOne</option> <option value="choiceOne">choiceThree</option> <option value="choiceOne">choiceFour</option> <option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option> </select> </div> <div class="search-select-arrow-down"></div> </div> 

नोट 2 div wrappers इसके अलावा अतिरिक्त डिवीज़ को ऐरो-डाउन बटन को जगह में जोड़ा गया, जहां आप चाहें (बिल्कुल तैनात), यहां हम इसे बाईं तरफ डालते हैं।

सीएसएस

 .sort-options-wrapper { display: inline-block; position: relative; border: 1px solid #83837f; } /* this second wrapper is needed for x-browser compatibility */ .sort-options-wrapper-2 { overflow: hidden; } select { margin-right: -19px; /* that's what hidding the default-provided browser arrow */ padding-left: 13px; margin-left: 0; border: none; background: none; /* margin-top & margin-bottom must be set since some browser have default values for select elements */ margin-bottom: 1px; margin-top: 1px; } select:focus { outline: none; /* removing default browsers outline on focus */ } .search-select-arrow-down { position: absolute; height:10px; width: 12px; background: url(http://img.hiwab.com/html/pHIYN06.png) scroll no-repeat 2px 0px; left: 1px; top: 5px; } 

डैनल्ड के जवाब में दूसरी विधि ( https://stackoverflow.com/a/13968900/280972 ) को हॉवर प्रभाव और अन्य माउस ईवेंट के साथ काम करने के लिए सुधार किया जा सकता है बस सुनिश्चित करें कि "बटन" -लिमेंट मार्कअप में चयनित तत्व के ठीक बाद आता है फिर इसे + सीएसएस-चयनकर्ता का उपयोग करके लक्षित करें:

HTML:

 <select class="select-input">...</select> <div class="select-button"></div> 

सीएसएस:

 .select-input:hover+.select-button { [hover styles here] } 

हालांकि, केवल "बटन" पर न केवल चयन-तत्व पर कहीं भी घुमाने के दौरान यह होवर प्रभाव दिखाएगा

I'm using this method in combination with Angular (since my project happens to be an Angular-app anyway), to cover the whole select-element, and let Angular display the text of the selected option in the "button"-element. In this case it makes perfect sense that the hover-effect applies when hovering anywhere over the select. It doesn't work without javascript though, so if you want to do this, and your site has to work without javascript, you should make sure that your script adds the elements and classes necessary for the enhancement. That way, a browser without javascript will simply get a normal, unstyled, select, instead of a styled badge that doesn't update correctly.

There IS a way to style SELECT tags.

If there's a "size" parameter in the tag, almost any CSS will apply. Using this trick, I've created a fiddle that's practically equivalent to a normal select tag, plus the value can be edited manually like a ComboBox in visual languages (unless you put readonly in the input tag).

So here's a minimal example to see the principle behind:
(you'll need jQuery for the clicking mechanism) :

 <style> /* only these 2 lines are truly required */ .stylish span {position:relative;} .stylish select {position:absolute;left:0px;display:none} /* now you can style the hell out of them */ .stylish input { ... } .stylish select { ... } .stylish option { ... } .stylish optgroup { ... } </style> ... <div class="stylish"> <label> Choose your superhero: </label> <span> <input onclick="$(this).closest('div').find('select').slideToggle(110)"> <br> <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());"> <optgroup label="Fantasy"></optgroup> <option value="gandalf">Gandalf</option> <option value="harry">Harry Potter</option> <option value="jon">Jon Snow</option> <optgroup label="Comics"></optgroup> <option value="tony">Tony Stark</option> <option value="steve">Steven Rogers</option> <option value="natasha">Natasha Romanova</option> </select> </span> </div> 

Here's the fiddle with some more styles: https://jsfiddle.net/dkellner/7ac9us70/

(It's overstyled of course, just to demonstrate the possibilities.)

Notice how tags don't encapsulate the options belonging under them as they normally should; yes this is intentional, it's for the styling. (The well-mannered way would be a lot less stylable.) And yes they do work perfectly well this way.

Before anyone points out the NO-JS part: I know the question said "no Javascript". To me, this is more like please don't bother with plugins, I know they can do it but I need the native way . Understood, no plugins, no extra scripts included, only what fits inside a tag's "onclick". The only dependency is jQuery, to avoid the native "document.parentNode.getElementsByTagName" madness. But it can work that way. So yes, this is a native select tag with native styling and some onclick handlers. It's clearly not "a Javascript solution".

का आनंद लें!