ब्रैंडेड स्टाइलिंग

कस्टमाइज़ किया जा सकने वाला select API, <select> एलिमेंट को स्टाइल करने के लिए, सीएसएस पर आधारित एक डिक्लेरेटिव तरीका उपलब्ध कराता है. इससे, आपके ब्रैंड के डिज़ाइन सिस्टम से पूरी तरह मैच करने वाले एलिमेंट बनाए जा सकते हैं. appearance: base-select में ऑप्ट इन करने पर, आपको चुने गए एलिमेंट के इंटरनल शैडो डीओएम का ऐक्सेस मिलता है. इससे आपको स्टैंडर्ड सीएसएस प्रॉपर्टी का इस्तेमाल करके, बटन, विकल्प चुनने की सूची, ऐरो आइकॉन, और सही के निशान वाले इंडिकेटर को स्टाइल करने की सुविधा मिलती है.

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

इन्हें कैसे लागू करें

ब्रैंड के हिसाब से स्टाइलिंग लागू करने के लिए:

1. पसंद के मुताबिक बनाने की सुविधा के लिए ऑप्ट-इन करना: appearance: base-select को <select> एलिमेंट और ::picker(select) स्यूडो-एलिमेंट (जो विकल्पों की ड्रॉप-डाउन सूची को टारगेट करता है), दोनों पर लागू करें.
2. कस्टम बटन को स्ट्रक्चर करना (ज़रूरी नहीं): डिफ़ॉल्ट ट्रिगर को बदलने के लिए, <select> के अंदर सीधे तौर पर <button> एलिमेंट तय करें. इस बटन में <selectedcontent> एलिमेंट का इस्तेमाल करके, चुने गए मौजूदा विकल्प का टेक्स्ट या कॉन्टेंट दिखाएं.
3. पिकर लिस्ट को स्टाइल करना: ड्रॉपडाउन मेन्यू में टाइपोग्राफ़ी, बैकग्राउंड के रंग, बॉर्डर, और शैडो लागू करने के लिए, ::picker(select) स्यूडो-एलिमेंट का इस्तेमाल करें. ब्राउज़र इसे टॉप-लेयर में रेंडर करता है. इससे z-index से जुड़ी समस्याएं नहीं होतीं.
4. इंटरनल आइकॉन की स्टाइल:
   • ऐरो आइकॉन को स्टाइल करने या बदलने के लिए, select::picker-icon का इस्तेमाल करें.
   • चालू विकल्प के बगल में मौजूद, सही के निशान वाले इंडिकेटर को स्टाइल करने के लिए, option::checkmark का इस्तेमाल करें.
5. स्टाइल के विकल्प: होवर स्टेट, पैडिंग, और लेआउट के लिए, <option> एलिमेंट पर स्टाइल लागू करें.

कोड का उदाहरण: ब्रैंडेड कूरियर सेवा चुनें

इस उदाहरण में, मोनोस्पेस फ़ॉन्ट और डैश वाली बॉर्डर के साथ स्टाइल किया गया कस्टम विकल्प दिखाया गया है. इससे, "पार्सल" ब्रैंड की खास खूबसूरती को मैच किया जा सकता है.

/* Enable customization for the select and its picker */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}

/* Style the visible trigger button */
.brand-select {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  color: #8b4513;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Style the dropdown options list */
.brand-select::picker(select) {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Customize internal part colors to match text */
.brand-select::picker-icon {
  color: #8b4513;
}

.brand-select option::checkmark {
  color: #8b4513;
}

/* Style individual options and hover effects */
.brand-select option {
  padding: 0.5rem;
  border-radius: 4px;
  color: #8b4513;
  cursor: pointer;
}

.brand-select option:hover {
  background-color: #fdf5e6;
}

<label for="preferences">Select shipping preference</label>
<select class="brand-select" id="preferences" name="preferences">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">Standard Shipping</option>
  <option value="express" selected>Express Shipping</option>
  <option value="overnight">Overnight Delivery</option>
</select>

रणनीति को लागू करने के तरीके और सबसे सही तरीके

• appearance: base-select का इस्तेमाल तब करें, जब आपके डिज़ाइन सिस्टम को सभी फ़ॉर्म कंट्रोल में हाई-फ़िडेलिटी और विज़ुअल कंसिस्टेंसी की ज़रूरत हो. ऐसा तब होता है, जब स्टैंडर्ड क्रॉस-ब्राउज़र सिलेक्ट ओवरराइड का इस्तेमाल करके, यह हासिल नहीं किया जा सकता.
• अगर आपको ऑपरेटिंग सिस्टम के नेटिव पिकर का इस्तेमाल करना है, तो इसका इस्तेमाल न करें. उदाहरण के लिए, iOS डिवाइसों पर स्टैंडर्ड स्क्रोल व्हील पिकर. base-select को चुनने पर, नेटिव मोबाइल यूज़र इंटरफ़ेस (यूआई) कंट्रोल से ऑप्ट आउट हो जाता है. ऐसा इसलिए होता है, ताकि वेब पर रेंडर किए गए टॉप-लेयर मेन्यू का इस्तेमाल किया जा सके.
• ज़रूर पुष्टि करें कि कलर कंट्रास्ट, डब्ल्यूसीएजी के मानकों के मुताबिक हो. पसंद के मुताबिक बनाए जा सकने वाले पिकर की मदद से, ज़रूरत के हिसाब से रंग सेट किए जा सकते हैं. हालांकि, यह पक्का करना आपकी ज़िम्मेदारी है कि पसंद के मुताबिक बनाए गए बैकग्राउंड पर टेक्स्ट साफ़ तौर पर पढ़ा जा सके.
• लेआउट के काम करने के तरीके की जांच करना. appearance: base-select को सेट करने से, डिफ़ॉल्ट ब्राउज़र का वह व्यवहार हट जाता है जिसके तहत, ब्राउज़र सबसे लंबे विकल्प की चौड़ाई के आधार पर, चुने गए विकल्प का साइज़ तय करता है. लेआउट शिफ़्ट रोकने के लिए, आपको तय चौड़ाई सेट करनी पड़ सकती है या फ़्लेक्स/ग्रिड कंस्ट्रेंट का इस्तेमाल करना पड़ सकता है.
• पक्का करें कि आपके <select> में name एट्रिब्यूट और उससे जुड़ा <label> मौजूद हो. इससे यह पक्का होता है कि कस्टम यूज़र इंटरफ़ेस (यूआई) होने पर भी, कॉम्पोनेंट को स्क्रीन रीडर ऐक्सेस कर सकते हैं. साथ ही, यह स्टैंडर्ड फ़ॉर्म सबमिशन के साथ सही तरीके से काम करता है.
• विकल्पों पर स्टैंडर्ड value एट्रिब्यूट का इस्तेमाल करें, ताकि यह पक्का किया जा सके कि फ़ॉर्म सबमिशन पहले की तरह ही काम करे.

फ़ॉलबैक रणनीतियां

कस्टमाइज़ किए जा सकने वाले <select> के लिए फ़ॉलबैक और ब्राउज़र की सुविधा

जिन ब्राउज़र पर अब तक appearance: base-select काम नहीं करता है उनके लिए, <select> एलिमेंट को स्टैंडर्ड ऑपरेटिंग सिस्टम के ड्रॉपडाउन में बदल दिया जाता है.

• बिना टेक्स्ट वाले कॉन्टेंट को अनदेखा किया जाता है: पुराने ब्राउज़र, <option> टैग में मौजूद एचटीएमएल टैग (जैसे, <svg> या <div>) को हटा देते हैं और सिर्फ़ टेक्स्ट नोड को रेंडर करते हैं. पक्का करें कि <option> का टेक्स्ट कॉन्टेंट पढ़ने लायक हो और उसका कोई मतलब निकलता हो.
• एचटीएमएल स्ट्रक्चर को मैनेज करना: स्टैंडर्ड पार्सर, <select> के अंदर मौजूद <button> और <selectedcontent> टैग को अनदेखा कर सकते हैं या उन्हें अमान्य मान सकते हैं. अगर स्टैंडर्ड टेक्स्ट को पढ़ने लायक फ़ॉलबैक के तौर पर देखा जाता है, तो प्रोग्रेसिव एनहैंसमेंट के लिए, भारी-भरकम JavaScript पॉलीफ़िल की ज़रूरत नहीं होती.

document.addEventListener("DOMContentLoaded", () => {
  // Check if browser supports base-select value
  if (!CSS.supports("appearance", "base-select")) {
    // Custom select overrides are not supported natively.
  }
});