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




css combobox (16)

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

शेष स्टाइल (सीमाएं, पैडिंग, रंग, आदि) काफी सरल है।

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

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

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

इस कोड को सभी प्रमुख ब्राउज़रों के साथ संगत होने की आवश्यकता है:

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

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

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

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

और यह Doctype.com पर है।


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


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

आईई 8/9 के लिए एक सुरक्षित फॉलबैक के साथ आईई 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 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


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

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

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

select {
  -webkit-appearance: none;
}

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

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


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

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

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


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

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>

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

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

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>



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

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 साथ-साथ वेबकिट का समर्थन नहीं करता है, ऐसा लगता है।


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


सीमाओं को फसल और 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..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..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>

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

संदर्भ


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

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

का आनंद लें!


You can also add a hover style to the dropdown.

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>


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

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





skinning