Html "select" एलिमेंट का विकल्प कैसे स्टाइल करें?

Question

यहाँ मेरा HTML है:

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

मैं उत्पाद का नाम (यानी 'Product1', 'Product2', आदि) को बोल्ड बनाना चाहता हूं, और इसके (अर्थात इलेक्ट्रॉनिक्स, खेल, आदि) italicized, केवल CSS का उपयोग करके। मुझे एक पुराना प्रश्न मिला जिसका उल्लेख है कि यह HTML और CSS का उपयोग करना संभव नहीं है, लेकिन उम्मीद है कि अब एक समाधान है।

Comments

इसके बारे में पक्का भरोसा नहीं है। मुझे नहीं लगता। ऐसा करने के लिए आपको कुछ जावास्क्रिप्ट (jQuery) जादू की आवश्यकता होगी।

— का घोस्ट

विकल्प अभी भी शैली के लिए उतने ही कष्टप्रद हैं जितने कि वे कभी भी। : क्या आप उपयोग कर सकते हैं एक optgroup है htmlhelp.com/reference/html40/forms/optgroup.html इस आप एक बोल्ड और इटैलिक श्रेणी दे देंगे (इलेक्ट्रॉनिक्स) की तरह है जिसके तहत विकल्पों में से एक गुच्छा गिर जाते हैं।

— wolv2012

Answer 1

केवल कुछ शैली विशेषताएँ हैं जिन्हें किसी <option>तत्व पर लागू किया जा सकता है ।

ऐसा इसलिए है क्योंकि इस प्रकार का तत्व "प्रतिस्थापित तत्व" का एक उदाहरण है। वे OS-निर्भर हैं और HTML / ब्राउज़र का हिस्सा नहीं हैं। इसके माध्यम से स्टाइल नहीं किया जा सकता है CSS।

वहाँ प्रतिस्थापन प्लग इन / पुस्तकालयों है कि एक तरह लग रहे हैं <select>, लेकिन वास्तव में नियमित रूप से से बने होते हैं HTMLतत्वों है कि कर सकते हैं स्टाइल किया जा।

Comments

यह व्यवहार विभिन्न ब्राउज़रों और अलग-अलग ओएस में भिन्न होता है; यदि आप मुख्य रूप से IE के बारे में विंडोज पर बात कर रहे हैं तो यह स्पष्ट करने योग्य है।

— विंस बॉड्रेन

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

— Felype

@none मैंने स्टाइलिंग विकल्प टैग का उत्तर पोस्ट किया है । यह नहीं दिखाता है कि कैसे स्टाइल करना है <option>, लेकिन यह दिखाता है कि कैसे अनुकरण करना है <select>ताकि आप विकल्पों को स्टाइल कर सकें।

— अंडरटेकिंग

यद्यपि यह स्वीकृत उत्तर है, OPTIONआधुनिक ब्राउज़रों के साथ CSS के साथ शैली करना संभव है - विकल्प में एक शैली टैग जोड़ें

— Jimmery

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

— विस्मयकारी

Answer 2

नहीं, यह संभव नहीं है, क्योंकि इन तत्वों की स्टाइलिंग उपयोगकर्ता के ओएस द्वारा नियंत्रित की जाती है। MSDN आपके प्रश्न का उत्तर यहां देगा :

को छोड़कर background-colorऔर color, विकल्प तत्व के लिए शैली ऑब्जेक्ट के माध्यम से लागू शैली सेटिंग्स को अनदेखा किया जाता है।

Comments

इसलिए निष्कर्ष यह है: "एक चयन का विकल्प आंशिक रूप से सिर्फ CSS के साथ स्टाइल नहीं किया जा सकता है", ठीक है ??? :(

— MrClan

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

— devios1

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

— बेंजामिन रॉबिन्सन

<विकल्प शैली = "रंग: 'लाल'?"> मेरे लिए काम नहीं करता ... सुझाव?

— फैबियो

style="background-color: red;color: red;"मेरे लिए काम नहीं करता है। EDIT: डेवलपर कंसोल को बंद करने के बाद स्टाइल लागू किया गया था।

— काला

Answer 3

आप विकल्प तत्वों को कुछ हद तक स्टाइल कर सकते हैं।

* CSS टैग का उपयोग करके आप सिस्टम द्वारा तैयार किए गए बॉक्स के अंदर विकल्पों को स्टाइल कर सकते हैं।

उदाहरण:

#ddlProducts *
{
 border-radius:15px;
 background-color:red;
}

यह इस तरह दिखेगा:

Comments

यह केवल इसलिए सच है क्योंकि सभी चयनकर्ता छाया DOM innards को लक्षित करते हैं, आप प्रति ब्राउज़र उन लोगों को लक्षित कर सकते हैं।

— १२:

Answer 4

मैंने पाया और चयन स्टाइल के इस अच्छा उदाहरण का उपयोग करते हुए और options.You इस के साथ क्या कर सकते हैं का चयन आप सभी want.Here है फिडल

एचटीएमएल

<select id="selectbox1">
    <option value="">Select an option&hellip;</option>
    <option value="aye">Aye</option>
    <option value="eh">Eh</option>
    <option value="ooh">Ooh</option>
    <option value="whoop">Whoop</option>
</select>
<select id="selectbox2">
    <option value="">Month&hellip;</option>
    <option value="january">January</option>
    <option value="february">February</option>
    <option value="march">March</option>
    <option value="april">April</option>
    <option value="may">May</option>
    <option value="june">June</option>
    <option value="july">July</option>
    <option value="august">August</option>
    <option value="september">September</option>
    <option value="october">October</option>
    <option value="november">November</option>
    <option value="december">December</option>
</select>

सीएसएस

body {
    padding:50px;
    background-color:white;
}
.s-hidden {
    visibility:hidden;
    padding-right:10px;
}
.select {
    cursor:pointer;
    display:inline-block;
    position:relative;
    font:normal 11px/22px Arial, Sans-Serif;
    color:black;
    border:1px solid #ccc;
}
.styledSelect {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:white;
    padding:0 10px;
    font-weight:bold;
}
.styledSelect:after {
    content:"";
    width:0;
    height:0;
    border:5px solid transparent;
    border-color:black transparent transparent transparent;
    position:absolute;
    top:9px;
    right:6px;
}
.styledSelect:active, .styledSelect.active {
    background-color:#eee;
}
.options {
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:999;
    margin:0 0;
    padding:0 0;
    list-style:none;
    border:1px solid #ccc;
    background-color:white;
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}
.options li {
    padding:0 6px;
    margin:0 0;
    padding:0 10px;
}
.options li:hover {
    background-color:#39f;
    color:white;
}

जे एस

// Iterate over each select element
$('select').each(function () {

    // Cache the number of options
    var $this = $(this),
        numberOfOptions = $(this).children('option').length;

    // Hides the select element
    $this.addClass('s-hidden');

    // Wrap the select element in a div
    $this.wrap('<div class="select"></div>');

    // Insert a styled div to sit over the top of the hidden select element
    $this.after('<div class="styledSelect"></div>');

    // Cache the styled div
    var $styledSelect = $this.next('div.styledSelect');

    // Show the first select option in the styled div
    $styledSelect.text($this.children('option').eq(0).text());

    // Insert an unordered list after the styled div and also cache the list
    var $list = $('<ul />', {
        'class': 'options'
    }).insertAfter($styledSelect);

    // Insert a list item into the unordered list for each select option
    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    // Cache the list items
    var $listItems = $list.children('li');

    // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
    $styledSelect.click(function (e) {
        e.stopPropagation();
        $('div.styledSelect.active').each(function () {
            $(this).removeClass('active').next('ul.options').hide();
        });
        $(this).toggleClass('active').next('ul.options').toggle();
    });

    // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
    // Updates the select element to have the value of the equivalent option
    $listItems.click(function (e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $list.hide();
        /* alert($this.val()); Uncomment this for demonstration! */
    });

    // Hides the unordered list when clicking outside of it
    $(document).click(function () {
        $styledSelect.removeClass('active');
        $list.hide();
    });

});

Comments

क्या आप कृपया यहां कोड पोस्ट कर सकते हैं क्योंकि हो सकता है कि किसी दिन इसे हटा दिया जाए, लेकिन यहां इसे बचाकर रखा जाएगा

— मोहम्मद अलबेद

यह बहुत ही गतिशील तरीका है कि आप चयन के साथ क्या करना चाहते हैं, यदि आपके पास एक बेहतर विकल्प होगा, तो मुझे यहां एक उत्तर के रूप में देखकर खुशी होगी @ahnbizcad

— DEV

यह एक देशी HTML नहीं है <select> यह कुछ jQuery कोड के साथ एक को फिर से प्रस्तुत करता है। यदि आपका ऐसा करने वाला jQuery प्लगइन, रिएक्ट कंपोनेंट आदि का उपयोग करता है, जो कीबोर्ड UP / DOWN, typeahead / search आदि को हैंडल करता है

— John Culviner

Answer 5

यदि आप बूटस्ट्रैप और / या jquery का उपयोग कर रहे हैं <option>, <select>तो स्टाइल के साथ कुछ तरीके यहां दिए गए हैं। मैं समझता हूं कि मूल पोस्टर यह नहीं पूछ रहा है, लेकिन मुझे लगा कि मैं इस प्रश्न पर दूसरों की मदद कर सकता हूं।

आप अभी भी प्रत्येक को <option>अलग से स्टाइल करने के लक्ष्य को प्राप्त कर सकते हैं , लेकिन <select>साथ ही साथ कुछ स्टाइल को लागू करने की आवश्यकता हो सकती है । मेरा पसंदीदा नीचे उल्लिखित "बूटस्ट्रैप सिलेक्ट" लाइब्रेरी है।

---

बूटस्ट्रैप सिलेक्ट लाइब्रेरी (jquery)

यदि आप पहले से बूटस्ट्रैप का उपयोग कर रहे हैं, तो आप बूटस्ट्रैप चयन लाइब्रेरी या नीचे दी गई लाइब्रेरी को आज़मा सकते हैं (क्योंकि इसमें बूटस्ट्रैप थीम है)।

ध्यान दें कि आप संपूर्ण selectतत्व, या optionतत्वों को अलग-अलग शैली देने में सक्षम हैं ।

उदाहरण :

निर्भरता : jQuery v1.9.1 +, बूटस्ट्रैप , बूटस्ट्रैप के ड्रॉपडाउन। जे एस घटक और बूटस्ट्रैप के सीएसएस की आवश्यकता है

संगतता : असुरक्षित, लेकिन बूटस्ट्रैप का कहना है कि यह "सभी प्रमुख ब्राउज़रों और प्लेटफार्मों के नवीनतम, स्थिर रिलीज का समर्थन करता है"

डेमो : https://developer.snapappointments.com/bootstrap-select/examples/

.special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>

---

Select2 (JS lib)

एक पुस्तकालय है जिसे आप Select2 नामक उपयोग कर सकते हैं ।

निर्भरताएँ : लाइब्रेरी केवल JS + CSS + HTML है (इसमें JQuery की आवश्यकता नहीं है)।

संगतता : IE 8+, क्रोम 8+, फ़ायरफ़ॉक्स 10+, सफारी 3+, ओपेरा 10.6+

डेमो : https://select2.org/getting-started/basic-usage

बूटस्ट्रैप थीम भी उपलब्ध है।

कोई बूटस्ट्रैप उदाहरण नहीं:

$(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

बूटस्ट्रैप उदाहरण:

$(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

---

MDBootstrap ($ और बूटस्ट्रैप और JQuery)

यदि आपके पास अतिरिक्त पैसा है, तो आप एक प्रीमियम लाइब्रेरी MDBootstrap का उपयोग कर सकते हैं । (यह संपूर्ण UI किट है , इसलिए यह प्रकाश नहीं है)

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

एक मुक्त संस्करण है, लेकिन यह आपको सुंदर सामग्री डिजाइन का उपयोग करने की अनुमति नहीं देगा!

निर्भरताएँ : बूटस्ट्रैप 4 , JQuery,

संगतता : "सभी प्रमुख ब्राउज़रों और प्लेटफार्मों के नवीनतम, स्थिर रिलीज का समर्थन करता है।"

डेमो : https://mdbootstrap.com/docs/jquery/forms/select/#color

Comments

क्योंकि सवाल विकल्प तत्व को स्टाइल करने का है, न कि सेलेक्ट एलिमेंट का।

— जसलीनस

यह उत्तर भ्रामक है, क्योंकि जब आप स्पष्ट रूप से दिखाते हैं कि आप चुनिंदा शैली को दिखा सकते हैं , तो आप दावा करते हैं कि विकल्प वही है जिसे स्टाइल किया जा सकता है, भले ही यह एक OS तत्व है जो केवल न्यूनतम CSS स्टाइल को स्वीकार करता है।

— एंड्रयू ग्रे

@ जसलीनदास क्षमा करें, मेरा पिछला जवाब अत्याचारी था। मैंने इसे एक के साथ बदल दिया है जो मुझे आशा है कि बेहतर है।

— केटी

बहुत बढ़िया जवाब! अच्छे उदाहरण!

— ccwwg

Select2 4.0 अब शुद्ध नहीं है क्योंकि यह अब jQuery पर बनाता है।

— गाल्मोक

Answer 6

लगता है जैसे मैं selectसीधे क्रोम में सीधे सीएसएस सेट कर सकता हूं । नीचे दिए गए CSS और HTML कोड:

.boldoption {
	font-weight: bold;
}

<select>
	<option>Some normal-font option</option>
	<option>Another normal-font option</option>
	<option class="boldoption">Some bold option</option>
</select>

Comments

@ मुहम्मद अल खलील: मैंने उदाहरण को और अधिक स्पष्ट होने के लिए अद्यतन किया, क्योंकि वर्तमान में चयनित विकल्प की अपनी शैली भी है। अगर वह काम नहीं करता है, तो मुझे ब्राउज़र संगतता मुद्दों पर संदेह है। = \

— HoldOffHunger

@ आकाश: दिलचस्प है, यह फ़ायरफ़ॉक्स क्वांटम जारी करने से पहले फ़ायरफ़ॉक्स पर काम करता था, और यह अभी भी क्रोम (60% + उपयोगकर्ता) पर काम करता है। मुझे यकीन है यह एक बग है!

— होल्डऑफ ह्यूंगर

यह केवल ड्रॉप डाउन के लिए काम करता है, चयनित के रूप में प्रदर्शित नहीं होता है। बहुत बुरा।

— WebDude0482

Answer 7

जैसा कि पहले ही उल्लेख किया गया है, एकमात्र तरीका एक प्लगइन का उपयोग करना है जो <select>कार्यक्षमता को बदलता है।

JQuery प्लगइन्स की एक सूची: http://plugins.jquery.com/tag/select/

Select2प्लगइन का उपयोग करके उदाहरण देखें : http://jsfiddle.net/swsLokfj/23/

Comments

वर्तमान jQuery के Select2 4.x में, ऐसा करने का तरीका अब अलग है। देखें: उदाहरण , डॉक्स ।

— तानीस

Answer 8

बूटस्ट्रैप आपको डेटा-सामग्री के माध्यम से स्टाइल का उपयोग करने की अनुमति देता है:

<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

उदाहरण: https://silviomoreto.github.io/bootstrap-select/examples/

Comments

HTML डेटा विशेषताओं में एम्बेडेड मुझे वास्तव में icky लगता है।

— बेन हल

Answer 9

कुछ गुणों को <option>टैग के लिए स्टाइल किया जा सकता है :

• font-family
• color
• font-*
• background-color

इसके अलावा, आप व्यक्ति के लिए कस्टम फ़ॉन्ट का उपयोग कर सकते <option>टैग, उदाहरण के लिए किसी भी गूगल फ़ॉन्ट , सामग्री प्रतीक या अन्य आइकन फोंट icomoon या एक जैसे। (यह फ़ॉन्ट चयनकर्ताओं आदि के लिए काम आ सकता है)

यह देखते हुए, आप फ़ॉन्ट-परिवार स्टैक बना सकते हैं और <option>टैग में आइकन डाल सकते हैं , जैसे।

    <select>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">a    ★★★</option>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">b    ★★★★</option>
    </select>

जहां ★से लिया गया है Iconsऔर बाकी से है Roboto।

ध्यान दें कि कस्टम फोंट मोबाइल के चयन के लिए काम नहीं करते हैं।

Comments

<विकल्प शैली = "रंग: 'लाल'?"> मेरे लिए काम नहीं करता ... सुझाव?

— फैबियो

ओवर कोट निकालें red: <विकल्प शैली = "रंग: लाल;">

— dy_

Answer 10

वास्तव में आप जोड़ सकते हैं: पहले और बाद में और शैली उन। कम से कम यह कुछ तो है

option{
    font-size:18px;
    background-color:#ffffff;
}
option:before{
    content: ">";
    font-size:20px;
    display:none;
    padding-right:10px;
    padding-left:5px;
    color:#fff;
}
option:hover:before{
    display:inline;
}

Answer 11

यह 2017 है और विशिष्ट चुनिंदा विकल्पों को लक्षित करना संभव है। मेरी परियोजना में मेरे पास एक वर्ग है जिसमें "= विविधताएं" हैं , और चयनित विकल्प तालिका सेल td = "मान" में हैं , और चयन में एक आईडी का चयन करें # pa_color । विकल्प तत्व में एक वर्ग विकल्प भी है = "संलग्न" (अन्य वर्ग टैग के बीच)। यदि कोई उपयोगकर्ता थोक ग्राहक के रूप में लॉग इन है, तो वे सभी रंग विकल्पों को देख सकते हैं। लेकिन खुदरा ग्राहकों को 2 रंग विकल्प खरीदने की अनुमति नहीं है, इसलिए मैंने उन्हें अक्षम कर दिया है

<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>

इसने थोड़ा तर्क लिया, लेकिन यहां बताया गया है कि कैसे मैंने अक्षम चुनिंदा विकल्पों को लक्षित किया।

सीएसएस

table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}

इसके साथ, मेरे रंग विकल्प केवल थोक ग्राहकों को दिखाई देते हैं।

Answer 12

एक मेज पर क्लास टॉगल का उपयोग करके, यहां एक त्वरित विकल्प छोड़कर। व्यवहार एक चयन से बहुत समान है, लेकिन व्यक्तिगत रूप से प्रत्येक बच्चे को संक्रमण, फिल्टर और रंगों के साथ स्टाइल किया जा सकता है।

function toggleSelect(){ 
 if (store.classList[0] === "hidden"){
    store.classList = "viewfull"
  }
  else {
    store.classList = "hidden"
  }
}

#store {
  overflow-y: scroll;
  max-height: 110px;
  max-width: 50%
 }
 
.hidden {
  display: none
 }
 
.viewfull {
  display: block
}

#store :nth-child(4) {
  background-color: lime;
}

span {font-size:2rem;cursor:pointer}

<span onclick="toggleSelect()">⮋</span>
 <div id="store" class="hidden">
 
<ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul>
 
 </div>

Answer 13

<option>टैग में कस्टोम स्टाइल जोड़ने के लिए आप इनलाइन स्टाइल का उपयोग कर सकते हैं ।

उदाहरण के लिए: <option style="font-weight:bold;color:#09C;">Option 1</option> यह <option>केवल इस विशेष तत्व के लिए शैलियों को लागू करेगा ।

तो फिर आप <option>एक <select>टैग के भीतर तत्वों के सभी के लिए इनलाइन शैलियों को लागू करने के लिए जावास्क्रिप्ट जादू का एक सा उपयोग कर सकते हैं :

var select = $(document).getElementById('#select-element-id')

var option = select.children('#option-element-id')

option.css('font-weight', 'bold')

option.css('font-size', '24px')

आप <option value="" disabled> <br> </option>विकल्पों के बीच एक लाइन-ब्रेक जोड़ने के लिए भी उपयोग कर सकते हैं।

Answer 14

यह तत्व ओएस द्वारा प्रस्तुत किया गया है, न कि HTML द्वारा। इसे CSS के माध्यम से स्टाइल नहीं किया जा सकता है।

	$(function() {
    var clicky;
    var t=0;
    $(document).mousedown(function(e) {
        clicky = $(e.target);
    });
    $(document).mouseup(function(e) {
        clicky = null;
    });

    $("select").focusout(function(e) {
        if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) {
        	$(this).parents().children("span.selected").html(clicky.html());
        	$(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true);
		}
        
        $(this).parents().children("span.lists").html('');
        

    });
    $('select > option').text(function(i, text) {
				var attr = $(this).attr('selected');
				if (typeof attr !== typeof undefined && attr !== false) {
        				$(this).parents().parents().children("span.selected").html(text);
				}
	});

		$("select").focusin(function(){
			$(this).children('option').text(function(i, text) {
    			$(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>");
				});
		});

	});

select {
  width: 0px;
  height: 0px;
  overflow:hidden;
  outline: none;
  border: none;
  appearance:none;
  -moz-appearance: none;

}
label{
	display: inline-block;
	padding: 5px 10px;
	position: relative;
	width: 100px;
	height: 20px;
	background-color:#ccc;

}
label .selected{
	display: inline-block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
label span.lists{
	width: 100%;
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	box-shadow: 0px 0px 2px 0px #ccc;
	background-color:#fff;
	z-index: 9;
}
label span.item{
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid #ccc;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<form action="?" method="GET">
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2" selected>item 2</option>
		<option value="3">item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test2">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2">item 2</option>
		<option value="3" selected>item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<button>Submit</button>
</form>

</body>
</html>

यह कोशिश करो यह आपकी मदद कर सकता है

[ https://codepen.io/venu9l/pen/jeNXzY][1]

Answer 15

आप एक वर्ग जोड़ सकते हैं और फ़ॉन्ट-भार दे सकते हैं: 700; विकल्प में। लेकिन इसके इस्तेमाल से सारा टेक्स्ट बोल्ड हो जाएगा।

Answer 16

यह निश्चित रूप से काम करेगा। चयन विकल्प ओएस द्वारा html द्वारा नहीं प्रदान किया गया है। यही कारण है कि CSS शैली प्रभाव नहीं डालती है, .. आम तौर पर option{font-size : value ; background-color:colorCode; border-radius:value; }
यह काम करेगा, लेकिन हम पैडिंग, मार्जिन आदि को अनुकूलित नहीं कर सकते।

नीचे दिए गए कोड 100% इस उदाहरण से चुने गए टैग को अनुकूलित करने के लिए काम करते हैं

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*for each element, create a new DIV that will contain the option list:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 1; j < selElmnt.length; j++) {
    /*for each option in the original select element,
    create a new DIV that will act as an option item:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
        /*when an item is clicked, update the original select box,
        and the selected item:*/
        var y, i, k, s, h;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        h = this.parentNode.previousSibling;
        for (i = 0; i < s.length; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            y = this.parentNode.getElementsByClassName("same-as-selected");
            for (k = 0; k < y.length; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
      /*when the select box is clicked, close any other select boxes,
      and open/close the current select box:*/
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
  });
}
function closeAllSelect(elmnt) {
  /*a function that will close all select boxes in the document,
  except the current select box:*/
  var x, y, i, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  for (i = 0; i < y.length; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < x.length; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
  </select>
</div>

Comments

समीक्षा से: हाय, कृपया स्रोत कोड के साथ जवाब न दें। आपका समाधान कैसे काम करता है, इसके बारे में एक अच्छा विवरण प्रदान करने का प्रयास करें। देखें: मैं एक अच्छा उत्तर कैसे लिखूं? । धन्यवाद

— s Octunı

यह कोड w2schools से सीधे है w3schools.com/howto/tryit.asp?filename=tryhow_custom_select

— devpato

Answer 17

भले ही बदलने के लिए अधिक गुण न हों, लेकिन आप केवल सीएसएस के साथ निम्नलिखित शैली प्राप्त कर सकते हैं:

HTML:

<div class="options">
    <select>
        <option value="">Apple</option>
        <option value="">Banana</option>
        <option value="">Orange</option>
        <option value="">Mango</option>
    </select>
</div>

सीएसएस:

.options {

    border: 1px solid #e5e5e5;
    padding: 10px;

    select {
        font-size: 14px;
        border: none;
        width: 100%;
        background: white;
    }
}