1333

वहाँ एक सीएसएस- <select>ड्रॉपडाउन शैली के लिए एक ही रास्ता है ?

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

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

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

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

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

मुझे स्टैक ओवरफ्लो पर इसी तरह के सवाल मिले ।

और Doctype.com पर यह एक ।

— जितेन्द्र व्यास
स्रोत

1

Google पर केवल js के समाधान के लिए बहुत कुछ नहीं मिला है

— Jitendra Vyas

41

मुझे लगता है कि यह एक वैध सवाल है, लेकिन इसका जवाब "नहीं, वास्तव में नहीं है" या "जिस तरह से आप चाहते हैं वह नहीं है"। लेकिन कोई भी (न ही मुझे) इसके बारे में 100% निश्चित है, अस्पष्टता की यह भावना पाठक की त्वचा के नीचे रेंगती है और सवाल की वैधता पर सवाल उठाया जाता है।

— जेडजेआर

1

@ जितेंद्र, मुझे पता है कि तुम्हारा क्या हो रहा है। यदि आप अपने प्रश्न को अधिक स्पष्ट करते हैं तो हमें अच्छा लगेगा। साथ ही, मुझे लगता है कि मुझे वह मिल गया जिसकी आपको तलाश है। यह प्रायोगिक है, लेकिन इसे देखें: cappuccino.org/aristo/showcase

— jeremyosborne

1

@jeremyosborne - उत्तर के लिए धन्यवाद। मुझे पता है कि मैं इसे जावास्क्रिप्ट के साथ बना सकता हूं। आपका eaxmple लिंक JS पर आधारित है। मैंने यह सवाल क्यों पूछा क्योंकि मैं जानना चाहता था, क्या किसी को इस बारे में पता है कि हम केवल सीएसएस के साथ सबसे अच्छा क्या कर सकते हैं

— जितेंद्र व्यास

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

— jeremyosborne

1027

यहाँ तीन समाधान दिए गए हैं:

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

-

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

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

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

appearance: noneइंटरनेट एक्सप्लोरर 11 (और बाद में) और फ़ायरफ़ॉक्स 34 (और बाद में) को छोड़कर - बहुत अच्छा ब्राउज़र समर्थन ( कैनीयूज़ ) है।

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

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

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

हमारे कस्टम तीर को कम से कम करने के लिए - डिफ़ॉल्ट चयन तीर को बरकरार रखना।

/* 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;
  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: Internet Explorer hackery ahead */


select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 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>

स्निपेट का विस्तार करें

यह समाधान आसान है और इसमें अच्छा ब्राउज़र समर्थन है - यह आमतौर पर पर्याप्त होना चाहिए।

यदि इंटरनेट एक्सप्लोरर 9 (और बाद में) और फ़ायरफ़ॉक्स 34 (और बाद में) के लिए ब्राउज़र समर्थन आवश्यक है, तो पढ़ते रहें ...

समाधान # 2 डिफ़ॉल्ट तीर ( डेमो ) को छिपाने के लिए चुनिंदा तत्व को अलग करें

-

(यहां और पढ़ें)

selectएक निश्चित चौड़ाई के साथ एक div में तत्व लपेटें और overflow:hidden।

फिर selectतत्व को div से अधिक लगभग 20 पिक्सेल की चौड़ाई दें ।

इसका परिणाम यह है कि selectतत्व का डिफ़ॉल्ट ड्रॉप-डाउन तीर छिपा होगा ( overflow:hiddenकंटेनर पर होने के कारण ), और आप किसी भी पृष्ठभूमि छवि को डिव के दाईं ओर रख सकते हैं।

लाभ इस दृष्टिकोण का है कि यह क्रॉस-ब्राउज़र (इंटरनेट एक्सप्लोरर 8 और बाद में, है वेबकिट , और छिपकली )। हालांकि, इस दृष्टिकोण का नुकसान यह है कि विकल्प ड्रॉप-डाउन जूट को राइट-हैंड-साइड (20 पिक्सेल जो हमने छुपाया था ...) के कारण बाहर निकलता है क्योंकि विकल्प तत्व चुनिंदा तत्व की चौड़ाई लेते हैं।

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

[हालांकि, यह ध्यान दिया जाना चाहिए, कि यदि कस्टम चयन तत्व केवल मोबाइल उपकरणों के लिए आवश्यक है - तो उपरोक्त समस्या लागू नहीं होती है - जिस तरह से प्रत्येक फोन मूल रूप से चयनित तत्व को खोलता है। तो मोबाइल के लिए, यह सबसे अच्छा समाधान हो सकता है।]

कोड स्निपेट दिखाएं

.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}

<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

स्निपेट का विस्तार करें

यदि फ़ायरफ़ॉक्स पर कस्टम तीर आवश्यक है - संस्करण 35 से पहले - लेकिन आपको इंटरनेट एक्सप्लोरर के पुराने संस्करणों का समर्थन करने की आवश्यकता नहीं है - तो पढ़ते रहें ...

समाधान # 3 - pointer-eventsसंपत्ति का उपयोग करें ( डेमो )

-

(यहां और पढ़ें)

यहाँ विचार देशी ड्रॉप डाउन एरो (हमारे कस्टम को बनाने के लिए) पर एक तत्व को ओवरले करना है और फिर उस पर पॉइंटर घटनाओं को हटाना है।

फायदा: यह वेबकीट और गेको में अच्छा काम करता है। यह अच्छा भी लग रहा है (कोई जूटिंग optionतत्व नहीं)।

नुकसान: इंटरनेट एक्सप्लोरर (इंटरनेट एक्सप्लोरर 10 और नीचे) का समर्थन नहीं करता है pointer-events, जिसका अर्थ है कि आप कस्टम तीर पर क्लिक नहीं कर सकते। इसके अलावा, इस विधि के साथ एक और (स्पष्ट) नुकसान यह है कि आप अपनी नई तीर छवि को एक हॉवर प्रभाव या हैंड कर्सर के साथ लक्षित नहीं कर सकते हैं, क्योंकि हमारे पास उन पर केवल पॉइंटर इवेंट अक्षम हैं!

हालाँकि, इस विधि से आप Internet Explorer को तीर में निर्मित मानक पर वापस लाने के लिए मॉर्डनाइज़र या सशर्त टिप्पणियों का उपयोग कर सकते हैं।

नायब: इंटरनेट एक्सप्लोरर 10 का conditional commentsअब कोई समर्थन नहीं करता है : यदि आप इस दृष्टिकोण का उपयोग करना चाहते हैं, तो आपको शायद माडर्निज़र का उपयोग करना चाहिए । हालांकि, इंटरनेट एक्सप्लोरर 10 से पॉइंटर-इवेंट सीएसएस को बाहर करना अभी भी संभव है, यहां वर्णित सीएसएस हैक के साथ ।

कोड स्निपेट दिखाएं

.notIE {
  position: relative;
  display: inline-block;
}
select {
  display: inline-block;
  height: 30px;
  width: 150px;
  outline: none;
  color: #74646E;
  border: 1px solid #C8BFC4;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #DDD8DC;
  background: #FFF;
}
/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
  pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}

<!--[if !IE]> -->
<div class="notIE">
  <!-- <![endif]-->
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  <!--[if !IE]> -->
</div>
<!-- <![endif]-->

स्निपेट का विस्तार करें

— Danield
स्रोत

1

इन 2 विधियों में से आपके अनुसार कौन सा सबसे अच्छा है?

— जितेंद्र व्यास

3

यह डिजाइन आवश्यकताओं पर निर्भर करता है। यदि आप ड्रॉप-डाउन जूटिंग के साथ ठीक हैं - तो यह सबसे अच्छा है क्योंकि यह क्रॉस ब्राउज़र है (IMO ऑलब्रॉवर्स + IE8 + को क्रॉस-ब्राउज़र माना जा सकता है), लेकिन मुझे लगता है कि कई लोग - यह नहीं करेंगे। तो वास्तव में ऊपर मेरे बयान में मेरा मतलब था कि एप्रोच # 2 सबसे अच्छा था।

— डेनियल

4

इसके अलावा, मैंने जो फिडेल पोस्ट किया है, वह IE को अपने डिफ़ॉल्ट तीर का उपयोग करने की अनुमति देने के लिए सशर्त बयानों के साथ दृष्टिकोण # 2 का उपयोग करता है।

— डेनियल

3

@AlexisLeclerc Div को ठीक करना और उसी चौड़ाई का चयन करना जो केवल Chrome जैसे इनवेट ब्राउज़र में काम करता है। (क्योंकि मैंने नियम शामिल किया है - वेबकिट-उपस्थिति: कोई नहीं; ) हालांकि यह फ़ायरफ़ॉक्स जैसे अन्य ब्राउज़रों में काम नहीं करता है

— Danield

4

यदि मैं दृष्टिकोण # 1 के लिए सुधार का प्रस्ताव कर सकता हूं, तो मैं व्यक्तिगत रूप से सीमा की कमी या चयन की कमी को सही पक्ष के कष्टप्रद पाया जा सकता है। मैंने अपने वर्तमान प्रोजेक्ट में आपके द्वारा उपयोग की जाने वाली कुछ चीज़ों के साथ आपकी फ़िडेल को अद्यतन किया: jsfiddle.net/YvCHW/1745 । मुझे बताओ तुम क्या सोचते हो!

— एलेक्सिस लेक्लर

233

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

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 Firefox (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer  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;
}

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

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

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

— मैथ्यू मोरक
स्रोत

4

अरे, मैंने देखा कि चुनिंदा बक्से फ़ायरफ़ॉक्स 12 के रूप में बहुत अलग दिखने लगे थे (यह क्रोम की तरह एक बहुत कुछ है (मेरे पास मैक है)), और ऐसा लगता है कि एफएफ 12 एक गुच्छा अधिक उपस्थिति विशेषताओं का समर्थन करता है।

— CWSpear

3

केवल क्रोम समाधान ... मैं इसके लिए भुगतान नहीं करेगा, न ही मेरे ग्राहक। x- ब्राउज़र समाधान के लिए @ डियानल्ड का उत्तर देखें।

— एड्रिन

41

@ AdrienBe मेरा समाधान लगभग 3 साल पहले प्रस्तावित किया गया था; उस समय जावास्क्रिप्ट लिबास या प्लगइन्स को शामिल किए बिना चुनिंदा बक्से को बहाल करने का एकमात्र उचित तरीका था। यदि आप उपसर्गों की विशेषताओं को छोड़ने का निर्णय लेते हैं, तो यह अभी भी व्यवहार्य है, लेकिन यह केवल वेबकिट-आधारित ब्राउज़र (इसलिए सफारी, नया ओपेरा + एंड्रॉइड) में ही मज़बूती से काम करता है। अभी, शायद बेहतर समाधान हैं, इसलिए व्यर्थ टिप्पणियों को जोड़ने के बजाय, बस उस समाधान के लिए वोट करें जिसे आप बेहतर रूप में देखते हैं और भविष्य में "उत्तर" की तारीख की जांच करें। धन्यवाद।

— मैथ्यू मोर

4

@MatthewMorek: 3 साल पहले भी एक बेहतर समाधान था। क्रॉस-ब्राउज़र समर्थन के बारे में डैनियल का जवाब बहुत बेहतर है (यह IE8 और बाद में, WebKit और गेको का समर्थन करता है)। प्रश्न ने पूछा "कोड सभी प्रमुख ब्राउज़रों के साथ संगत होने की आवश्यकता है: इंटरनेट एक्सप्लोरर 6,7 और 8, फ़ायरफ़ॉक्स और सफारी"। 2013 में पॉल स्वेट द्वारा इस एक्स-ब्राउज़र की आवश्यकता को जोड़ा गया है, हालांकि ... यदि ऐसा है तो क्षमा करें।

— Adrien Be

3

यदि आप text-indent: 0.01px; text-overflow: "";इसे जोड़ते हैं तो यह और भी बेहतर काम करेगा

— इवान

64

चुनिंदा तत्व और उसके लटकती सुविधा हैं शैली करने के लिए मुश्किल।

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

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

— pavium
स्रोत

47

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

यह लेयर्ड रोटेटेड बैकग्राउंड लेयर्स का उपयोग «कट आउट» एक ड्रॉपडाउन तीर के रूप में करता है, क्योंकि छद्म तत्व चुनिंदा तत्व के लिए काम नहीं करेंगे।

संपादित करें: इस अद्यतन संस्करण में मैं सीएसएस चर और एक छोटे थीमिंग सिस्टम का उपयोग कर रहा हूं।

:root {
  --radius: 2px;
  --baseFg: dimgray;
  --baseBg: white;
  --accentFg: #006fc2;
  --accentBg: #bae1ff;
}

.theme-pink {
  --radius: 2em;
  --baseFg: #c70062;
  --baseBg: #ffe3f1;
  --accentFg: #c70062;
  --accentBg: #ffaad4;
}

.theme-construction {
  --radius: 0;
  --baseFg: white;
  --baseBg: black;
  --accentFg: black;
  --accentBg: orange;
}

select {
  font: 400 12px/1.3 sans-serif;
  -webkit-appearance: none;
  appearance: none;
  color: var(--baseFg);
  border: 1px solid var(--baseFg);
  line-height: 1;
  outline: 0;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: var(--radius);
  background-color: var(--baseBg);
  background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}

select:hover {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}

select:active {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
  color: var(--accentBg);
  border-color: var(--accentFg);
  background-color: var(--accentFg);
}

<select>
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-pink">
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-construction">
  <option>So many options</option>
  <option>...</option>
</select>

स्निपेट का विस्तार करें

— हेनरिक
स्रोत

5

वाह, यह मेरे द्वारा देखे गए सबसे अच्छे समाधानों में से एक है। यह मैक पर क्रोम और सफारी के नवीनतम संस्करणों में मेरे लिए काम करता है। अन्य ब्राउज़रों के बारे में कैसे?

— तिनतिन T T २

2

फायरकैप में मेरे लिए काम करता है-moz-appearance: none;

— Zac

45

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

सफारी और गूगल क्रोम फिक्स :

select {
  -webkit-appearance: none;
}

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

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

— ioTus
स्रोत

1

उसके बाद अपनी स्टाइल जोड़ना न भूलें;) लेकिन मुझे बहुत खुशी है कि मैंने आज यह टिप्पणी पढ़ी।

— तेयुएन

1

क्या आप कृपया अपने कथन पर विस्तार से बता सकते हैं: "फ़ायरफ़ॉक्स पूरी तरह से सीएसएस के माध्यम से अनुकूलन योग्य है" मेरे लिए ऐसा लगता है कि फ़ायरफ़ॉक्स, दिखावटी संपत्ति का समर्थन नहीं करता है ... तो यह फ़ायरफ़ॉक्स में कैसे किया जाएगा?

— डेनियल

36

<select>टैग सीएसएस के माध्यम से स्टाइल किया जा सकता है जैसे कि ब्राउज़र में दिए गए HTML पेज पर किसी अन्य 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;
}

— jeremyosborne
स्रोत

30

कमाल है, पहली बार मैंने "माताओं" को इंटरनेट पर शामिल किया है, इसके बिना अशिष्ट। उस के लिए +1!

— BaL

34

यह उत्तर इस प्रश्न को हल नहीं करता है। यह केवल शैलियों का चयन करता है, लेकिन ड्रॉपडाउन का नहीं

— किबोरक

14

यह उत्तर क्रॉस ब्राउज़र संगति के लिए एक ड्रॉप डाउन सूची को स्टाइल करने की चुनौतियों की पूरी तरह से उपेक्षा करता है। यह बहुत कम प्रयास का जवाब है।

— बेंटऑन कोडिंग

18

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

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>

स्निपेट का विस्तार करें

— डैनियल
स्रोत

17

यहां एक संस्करण है जो सभी आधुनिक ब्राउज़रों में काम करता है। कुंजी का उपयोग 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+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/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>

स्निपेट का विस्तार करें

— एरिक
स्रोत

16

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

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: 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+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+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>

स्निपेट का विस्तार करें

नोट: आधार 64 सामान fa-chevron-downएसवीजी में है।

— Yajo
स्रोत

12

आधुनिक ब्राउज़रों में यह <select>CSS में स्टाइल करने के लिए अपेक्षाकृत दर्द रहित है । साथ appearance: noneही मुश्किल हिस्सा तीर को बदल रहा है (अगर तुम क्या चाहते हो कि)। यहाँ एक समाधान है जो 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>

स्निपेट का विस्तार करें

बाकी की स्टाइलिंग (बॉर्डर, पैडिंग, रंग आदि) काफी सीधी है।

यह उन सभी ब्राउज़रों में काम करता है जिन्हें मैंने अभी आज़माया था (फ़ायरफ़ॉक्स 50, क्रोम ५५, एज ३ browsers, और सफारी १०)। फ़ायरफ़ॉक्स के बारे में एक नोट यह है कि यदि आप #डेटा यूआरआई (उदाहरण fill: #000) में चरित्र का उपयोग करना चाहते हैं, तो आपको इसे ( fill: %23000) से बचने की आवश्यकता है ।

— केविन क्रिस्टोफर हेनरी
स्रोत

1

आप सीएसएस संपत्ति के बजाय एसवीजी को टैग पर height/ या widthविशेषता के साथ आकार दे सकते <svg>हैंbackground-size ।

— गीताकार

10

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;}

— छिपकली
स्रोत

वर्तमान क्रोम के साथ उस के साथ कुछ भी चयन नहीं कर सकते।

— विटाली ज़डनेविच

8

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

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

स्निपेट का विस्तार करें

बटन को क्लिक करने योग्य बनाने के लिए शून्य अपारदर्शिता के साथ दूसरे चयन का उपयोग करें:

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

स्निपेट का विस्तार करें

निर्देशांक वेबकिट और अन्य ब्राउज़रों के बीच भिन्न होता है, लेकिन एक @मीडिया क्वेरी इसे कवर कर सकती है।

संदर्भ

— पॉल स्वेट
स्रोत

1

मेरे लिए अच्छी तरह से काम करना, कम से कम क्रोम में: स्थिति: निरपेक्ष; क्लिप: रेक्ट (2px 85px 128px 2px); z-index: 2; पैडिंग-लेफ्ट: 18 पीएक्स; पैडिंग-राइट: 18 पीएक्स; मार्जिन: 7 पीएक्स ऑटो; रंग: # 555; फ़ॉन्ट-आकार: विरासत; पृष्ठभूमि-रंग: पारदर्शी;

— ब्रायनफ्रायड

1

मुझे IE7 में केवल आधा काम करने के लिए तीर से फसल मिली, क्योंकि आपके पास चयन की सीमा पर कोई नियंत्रण नहीं है।

— CpILL

1

संबंधित प्रश्न के

— पॉल स्वेट

1

@PaulSweatte, वाह, यह आपका 20 वां नेक्रोमन्ट है ! बधाई। सोने के नेक्रोमैंज़र बैज के लिए आपने मेरे सभी प्रश्नों को भी सबसे ऊपर रखा ।

— निमो

8

कस्टम चुनें सीएसएस शैलियों

इंटरनेट एक्सप्लोरर (10 और 11), एज, फ़ायरफ़ॉक्स और क्रोम में परीक्षण किया गया

select::-ms-expand {
  display: none;
}
select {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.5em 2em 0.5em 0.5em;
  border: 1px solid #eee;
  font: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px top 1em, right 10px top 1em;
  background-size: 5px 5px, 5px 5px;
}

<select name="">
  <option value="">Lorem</option>
  <option value="">Lorem Ipsum</option>
</select>

<select name="" disabled>
  <option value="">Disabled</option>
</select>

<select name="" style="color:red;">
  <option value="">Color!</option>
  <option value="">Lorem Ipsum</option>
</select>

स्निपेट का विस्तार करें

— रोको सी। बुल्जन
स्रोत

थोड़ा अधिक अनुकूलनीय (लेकिन सभी ब्राउज़रों में परीक्षण नहीं किया गया है):background-position: right 15px center, right 10px center;

— रॉबिन स्टीवर्ट

5

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

— अहमद अजमी
स्रोत

1

हां, लेकिन प्रश्न में आवश्यकता इंटरनेट एक्सप्लोरर 6,7 और 8

— जितेंद्र व्यास

2

हां, यह IE के साथ संगत नहीं है, लेकिन मैं किसी एक के लिए एक आधुनिक समाधान की तलाश में साझा करना पसंद करता था जैसा मैं देख रहा था।

— अहमद अजमी

5

इस तत्व को संपादित करने की अनुशंसा नहीं की जाती है, लेकिन यदि आप इसे किसी अन्य 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>

— Homar
स्रोत

2

@MikkoP: संपादन का सुझाव देते समय, क्या आप कृपया अधिक विवरणात्मक संपादन सारांश प्रदान करेंगे? "संदेश में सुधार" हमारे समीक्षकों के लिए एक उच्च-स्तरीय सारांश के रूप में बहुत उपयोगी नहीं है। धन्यवाद।

— जीन-फ्रांकोइस कॉर्बेट

1

@ जीन-फ्रांस्वा

— कोर्बेट

1

आप विकल्प तत्वों को स्टाइल नहीं कर सकते (यह SO उत्तर देखें: stackoverflow.com/a/7208814/703717 )

— Danield

4

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;
}

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

— सौभाग्यशाली
स्रोत

4

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

select {
  font-weight: bold;
}

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

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>

— डेव वार्ड
स्रोत

6

मैं इस तरह के बारे में बात नहीं कर रहा हूँ मैं कुछ और करने के लिए ड्रॉपडाउन तीर को बदलना चाहता हूं

— जितेंद्र व्यास

5

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

— रयान डोहर्टी

3

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

— डेव वार्ड

4

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

यह Internet Explorer 8/9 के लिए सुरक्षित वापसी के साथ Internet Explorer 10 (और बाद में) काम करता है। इन ब्राउज़रों के लिए एक चेतावनी यह है कि बैकग्राउंड इमेज को पोस्ट किया जाना चाहिए और देशी विस्तार नियंत्रण के पीछे छिपाने के लिए पर्याप्त छोटा होना चाहिए।

एचटीएमएल

<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("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/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 Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
    display: none;
}

CodePen

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

— ralgh
स्रोत

3

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

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

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

यहां Danield के jsfiddle का एक बुनियादी कांटा है जो IE10 के लिए समर्थन लागू करता है

— रिचर्ड साज़ले
स्रोत

3

एक आसान तरीका है।

इस फिडेल की जाँच करें, और मुझे ओवरस्टाइलिंग माफ करें : https://jsfiddle.net/dkellner/7ac9us70/

पीछे की चाल: जैसे ही <select> टैग को "आकार" नामक एक संपत्ति मिलती है, यह एक निश्चित-ऊंचाई सूची के रूप में व्यवहार करेगा, और, अचानक, किसी कारण से, आप इसे नरक से बाहर शैली करने की अनुमति देता है। अब कड़ाई से बोलते हुए, निर्धारित सूची एक साइड इफेक्ट है - लेकिन यह सिर्फ हमें और अधिक मदद करता है क्योंकि हम इसका उपयोग "गिरा-गिरा हुआ" के लिए करते हैं।

एक न्यूनतम उदाहरण:

<style>

    .stylish span   {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

</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="1">  Gandalf        </option>
            <option value="2">  Harry Potter   </option>
            <option value="3">  Jon Snow       </option>

            <!-- ... and so on -->

        </select>
    </span>
</div>

(इसे सरल रखने के लिए मैंने इसे jQuery के साथ किया - लेकिन आप इसके बिना भी ऐसा कर सकते हैं)

साइड नोट्स

यह समाधान आपको सिर्फ एक चयन से अधिक देता है: मूल्य भी मैन्युअल रूप से संपादन योग्य है। यदि आप डिफ़ॉल्ट चयन-प्रतिबंधित तरीके को पसंद करते हैं तो आसानी से प्रॉपर्टी का उपयोग करें।
स्टाइलिंग संभावनाओं को अधिकतम करने के लिए, <Optgroup> टैग उनके बच्चों के आसपास नहीं हैं , उन्हें उनके सामने ले जाया गया है। यह जानबूझकर है, यह नेत्रहीन स्पष्ट है, और वे इस तरह काम करने के लिए खुश हैं, चिंता न करें।
जावास्क्रिप्ट: हाँ मुझे पता है कि ओपी ने कहा "कोई जावास्क्रिप्ट" नहीं है, लेकिन मैं इसे समझ गया था कृपया प्लगइन्स से परेशान न करें , जो ठीक है। इसके लिए आपको किसी पुस्तकालय की आवश्यकता नहीं है। यहां तक कि jQuery भी नहीं, जैसा कि मैंने कहा, यह केवल उदाहरण की स्पष्टता के लिए है।

— dkellner
स्रोत

2

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

— Otvazhnii
स्रोत

2

आप ड्रॉपडाउन में एक हॉवर शैली भी जोड़ सकते हैं।

select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}

<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>

स्निपेट का विस्तार करें

2

डेनियल के जवाब में तीसरी विधि को हॉवर-प्रभाव और अन्य माउस घटनाओं के साथ काम करने के लिए बेहतर बनाया जा सकता है। बस यह सुनिश्चित करें कि मार्कअप में चुनिंदा तत्व के ठीक बाद "बटन" -हेलमेंट आता है। फिर इसे सीएसएस चयनकर्ता का उपयोग करके लक्षित करें:

HTML:

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

सीएसएस:

.select-input:hover+.select-button {
    <Hover styles here>
}

यह, हालांकि, "बटन" पर नहीं, बल्कि चयन-तत्व पर कहीं भी मँडराते समय होवर प्रभाव दिखाता है।

मैं इस पद्धति का उपयोग एंगुलर के साथ संयोजन में कर रहा हूं (चूंकि मेरी परियोजना वैसे भी एक कोणीय अनुप्रयोग है), पूरे चयन-तत्व को कवर करने के लिए, और "बटन" -लेमेंट में कोणीय को चयनित विकल्प के पाठ को प्रदर्शित करने दें। इस मामले में यह सही समझ में आता है कि चयन के दौरान कहीं भी मँडराते समय हॉवर-प्रभाव लागू होता है।

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

— एड्रियन श्मिट
स्रोत

1

मैं किसी भी गिरावट का कारण जानना पसंद करूंगा, इसलिए मैं जान सकता हूं कि कैसे सुधार किया जाए! Sch

— एड्रियन श्मिट

1

एक सीएसएस और HTML केवल समाधान

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

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

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>

दो डिव रैपर को नोटिस करें।

यह भी ध्यान दें कि तीर-डाउन बटन को रखने के लिए जोड़ा गया अतिरिक्त div जहाँ भी आपको पसंद है (बिल्कुल पोस्ट किया गया है), यहाँ हम इसे बाईं ओर रखते हैं।

सीएसएस

.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 is hiding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;

    /* margin-top & margin-bottom must be set since some
       browsers 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://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
    left: 1px;
    top: 5px;
}

— एड्रिएन बे
स्रोत

मैं केवल CSS के साथ एक <select> ड्रॉपडाउन कैसे शैली करूँ?

सभी एक साथ:

कस्टम चुनें सीएसएस शैलियों

एचटीएमएल

एससीएसएस

CodePen

एक आसान तरीका है।

साइड नोट्स

HTML:

सीएसएस:

सीएसएस