इस पेज का अनुवाद Cloud Translation API से किया गया है.

<select> एलिमेंट को अब सीएसएस की मदद से पसंद के मुताबिक बनाया जा सकता है
संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

Adam Argyle

पब्लिश करने की तारीख: 24 मार्च, 2025

Chrome 135 से, वेब डेवलपर और डिज़ाइनर, वेब पर एक ऐसे <select> एलिमेंट का इस्तेमाल कर पाएंगे जो ऐक्सेस किया जा सकता है, स्टैंडर्ड है, और सीएसएस स्टाइल में बदला जा सकता है. इस पर कई सालों तक काम किया गया है. इसमें इंजीनियरिंग और साथ मिलकर काम करने के लिए स्पेसिफ़िकेशन पर कई घंटे बिताए गए हैं. इसका नतीजा एक ऐसा बेहतरीन और दमदार कॉम्पोनेंट है जो पुराने ब्राउज़र में काम करेगा.

यहां इन नई सुविधाओं का इस्तेमाल करके, अपनी पसंद के मुताबिक चुने गए वीडियो का एक उदाहरण दिया गया है:

Una, Brecht, और Adam के डेमो दिखाए गए हैं.

अगर आपने इस बारे में बारीकी से नज़र बनाए रखी है, तो आपको पता चलेगा कि Una के समुदाय से सुझाव, शिकायत या राय मांगने के बाद, स्पेसिफ़िकेशन के कुछ नाम और सुविधाओं में बदलाव हुए हैं. अगर आपने उस पोस्ट के आधार पर काम किया है और आपको बदलावों के बारे में जानना है, तो यूना की मदद से यह जानकारी पाएं.

पसंद के मुताबिक बनाए जा सकने वाले चुनिंदा विकल्पों के लिए, MDN पर एक नया दस्तावेज़ भी उपलब्ध है. इसमें इस बारे में पूरी जानकारी दी गई है.

Meet `appearance: base-select`

एक नई सीएसएस प्रॉपर्टी appearance: base-select, जो <select> एलिमेंट को एक नई, कॉन्फ़िगर की जा सकने वाली, और स्टाइल की जा सकने वाली स्थिति में डालती है. इसे आम तौर पर "बेस" स्टाइल कहा जाता है:

.custom-select {
  &, &::picker(select) {
    appearance: base-select;    
  }
}

base-select का इस्तेमाल करने से, कई नई सुविधाएं और व्यवहार अनलॉक होते हैं:

<select> में मौजूद कॉन्टेंट के लिए, ब्राउज़र के एचटीएमएल पार्सर में बदलाव करता है.
<select> के रेंडर किए गए इंटरनल में बदलाव करता है.
<select> के लिए नए इंटरनल पार्ट और स्टेटस दिखाता है.
कस्टमाइज़ेशन के लिए ऑप्टिमाइज़ किया गया, नया और कम से कम विकल्पों वाला लुक.
दिखाए गए विकल्प, टॉप-लेयर में होते हैं, जैसे कि पॉपओवर.
anchor() के साथ दिखाए गए विकल्प.

base-select का इस्तेमाल करने पर, कई सुविधाएं और व्यवहार बंद हो जाते हैं:

<select>, ब्राउज़र पैनल के बाहर रेंडर नहीं होता.
यह मोबाइल ऑपरेटिंग सिस्टम के बिल्ट-इन कॉम्पोनेंट को ट्रिगर नहीं करता.
<select>, सबसे लंबे <option> की चौड़ाई लेना बंद कर देता है.

`<select>` में अब रिच एचटीएमएल कॉन्टेंट शामिल किया जा सकता है

<select> को पसंद के मुताबिक बनाने से पहले, अगर <option> एलिमेंट में इमेज या एसवीजी जैसी चीज़ें डाली जाती हैं, तो ब्राउज़र उन्हें अनदेखा कर देगा.

इस एचटीएमएल को देखें. ब्राउज़र इसे उसी तरह पढ़ेगा जिस तरह आपने इसे लिखा है:

<select class="custom-select">
  <option>
    <svg aria-hidden>…</svg>
    <span>HTML</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>CSS</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>JavaScript</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>WASM</span>
  </option>
</select>

हालांकि, इस्तेमाल किए गए DOM में <svg> शामिल नहीं होगा:

<select class="custom-select">
  <option>
    <span>HTML</span>
  </option>
  <option>
    <span>CSS</span>
  </option>
  <option>
    <span>JavaScript</span>
  </option>
  <option>
    <span>WASM</span>
  </option>
</select>

यहां (बाएं से दाएं) Chrome, Safari, और Firefox को ऊपर दिए गए एचटीएमएल को रेंडर करते हुए दिखाया गया है. अगर ब्राउज़र appearance: base-select के साथ काम करता है, तो विकल्प में SVG दिखेगा. ऐसा न होने पर, SVG नहीं दिखेगा.

Chrome, Safari, और Firefox में, एसवीजी के साथ एक चुनिंदा आइटम को रेंडर किया गया है. Chrome इमेज दिखाता है, जबकि Safari और Firefox ऐसा रेंडर करते हैं जैसे कोई इमेज न हो. — इस Codepen में आज़माएं.

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

अपनी ज़रूरत के मुताबिक बनाने की सुविधा

base-select के हर हिस्से को बदला जा सकता है, पसंद के मुताबिक बनाया जा सकता है, और ऐनिमेशन जोड़ा जा सकता है. यहां एक डेमो दिया गया है, जिसमें हर नई सुविधा का इस्तेमाल करके, चुनिंदा अनुभवों को बेहतर और काम का बनाया गया है.

चुने गए एलिमेंट के चार अलग-अलग प्रज़ेंटेशन दिखाए गए हैं. पहले आइकॉन में, हरे रंग का स्टेटस इंडिकेटर बिंदु है. साथ ही, उस पर 'चालू है' लेबल है. अगली इमेज में, विकल्पों के बगल में अवतार दिखाए गए हैं. तीसरा टूल, कलर स्पेस पिकर है. इसमें चुनने के लिए, कस्टम लेबल भी मौजूद होता है. आखिरी विकल्प से, ड्राफ़्ट या पब्लिश किए गए स्टेटस चुने जा सकते हैं. — इस Codepen में आज़माएं.

इस पोस्ट के आखिर में मौजूद संसाधन सेक्शन में, ज़्यादा उदाहरण देखें.

बिना बदलाव वाले JavaScript इंटरफ़ेस

<select> एलिमेंट के साथ आपके मौजूदा JavaScript इंटरैक्शन को कोई खतरा नहीं है.

हालांकि, अगर आपको अपने <option> एलिमेंट में रिच एचटीएमएल जोड़ना है, तो आपको चुनी गई वैल्यू की जांच करनी चाहिए. ऐसा इसलिए, क्योंकि ब्राउज़र अब भी इमेज और एसवीजी को पार्स करता है और उन्हें अनदेखा करता है. हालांकि, चुनी गई कॉन्टेंट स्ट्रिंग तय करने के लिए, लॉजिक बदल गया है. साथ ही, आपके पास जो विकल्प हैं उनके आधार पर, आपको बदलाव करने पड़ सकते हैं.

अगर <option> पर value एट्रिब्यूट का इस्तेमाल किया जा रहा है, तो आपको कुछ भी चिंता करने की ज़रूरत नहीं है.

संसाधन

Chrome, base-select को लागू करने वाला पहला ब्राउज़र है. हालांकि, हर ब्राउज़र ने इसकी खास बातों में हिस्सा लिया है. साथ ही, अभी और "बेस" एलिमेंट पूरे होने बाकी हैं. यह तो सिर्फ़ शुरुआत है.

हमारे साथ बने रहें, क्योंकि हम चुनिंदा एलिमेंट को पसंद के मुताबिक बनाने के लिए, दिशा-निर्देश, उदाहरण, और संसाधन जोड़ते रहेंगे. तब तक, ज़्यादा जानकारी के लिए यहां दिए गए लिंक देखें.

इस सुविधा को उपलब्ध कराने में शामिल सभी लोगों का खास धन्यवाद!