`<select>` अब CSS से customize किया जा सकता है

• Chrome 135 से <select> element के लिए accessibility standards को बनाए रखते हुए CSS customization को support करने वाला नया feature शुरू हुआ
• कई वर्षों की spec coordination और development के बाद, इसे एक मजबूत component के रूप में उपलब्ध कराया गया है जो पुराने browsers में भी टूटता नहीं है
• अब इसमें HTML content भी शामिल किया जा सकता है, और appearance: base-select जुड़ने से animation, style आदि के जरिए कई तरह के customization संभव हो गए हैं

appearance: base-select का परिचय

• नया CSS property appearance: base-select <select> element को एक नए customizable state में बदल देता है

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

• base-select इस्तेमाल करने पर मिलने वाले नए features

  • <select> के अंदर content के लिए browser के HTML parser का behavior बदल जाता है
  • rendering method और internal structure बदल जाते हैं
  • नए internal parts और states उपलब्ध होते हैं
  • minimal default design मिलता है, ताकि customization आसान हो
  • दिखाई गई options popover की तरह top layer में दिखती हैं
  • option की position को anchor() से control किया जा सकता है

• base-select इस्तेमाल करने पर हटने वाली features

  • browser window के बाहर <select> को render नहीं किया जा सकता
  • mobile OS का default selection UI नहीं खुलता
  • सबसे लंबे <option> की width को reflect नहीं करता

<select> में HTML content शामिल किया जा सकता है

• पहले <option> के अंदर image या SVG डालने पर browser उसे ignore कर देता था
• appearance: base-select लगाने पर HTML को जैसा है वैसा render किया जाता है
• Chrome में SVG वाले options दिखते हैं, लेकिन Safari, Firefox आदि अभी इसे support नहीं करते
• CodePen demo: प्रयोग लिंक
• यह feature Finch experiment के रूप में लाया गया है और जरूरत पड़ने पर रोका जा सकता है

पूरी तरह customization संभव

• base-select के सभी components को replace किया जा सकता है, animate किया जा सकता है और style लागू किया जा सकता है
• अलग-अलग designs के जरिए अधिक अर्थपूर्ण selection UI बनाया जा सकता है
• उदाहरणों में status indicator, avatar वाले options, color picker, और post status selection शामिल हैं
• CodePen demo: प्रयोग लिंक

JavaScript interface में कोई बदलाव नहीं

• मौजूदा <select> के लिए JavaScript behavior पहले जैसा ही बना रहता है
• हालांकि, अगर <option> में HTML डाला गया है तो selected value parsing का तरीका बदल गया है, इसलिए testing जरूरी है
• अगर value property का उपयोग किया जा रहा है, तो अलग से किसी बदलाव की जरूरत नहीं है

अतिरिक्त सामग्री

Web standards

• Open UI Select spec
• HTML spec Pull Request
• Chrome Intent to Ship

Chrome से संबंधित सामग्री

• Chrome blog request और explanation post
• community feedback results
• <select> में <hr> का उपयोग
• Una की explanation post / changes summary link
• Una का CodePen collection

Community सामग्री

• Brecht De Ruyte CodePen collection
• CSS Tricks का native vs custom select comparison
• Open Props UI का <select> implementation
• animation लागू किए गए custom select का example

Customized <select> का उपयोग करने वाले demos

• Una का demo
• Brecht का demo
• Adam का demo

[GN⁺]

Hacker News राय

• मैं इस फीचर को लेकर जितना ज़्यादा उत्साहित हूँ, उससे शायद मेरे 2000 के शुरुआती दौर के web developer होने का पता चलता है। select element बहुत उपयोगी फीचर है क्योंकि यह ऐसी functionality देता है जिसे HTML में दोबारा बनाया नहीं जा सकता

  • अब इसके बाद autocomplete और tag picker भी जोड़ने चाहिए

• जब तक इस फीचर को व्यापक support नहीं मिल जाता, इसे progressive enhancement के रूप में इस्तेमाल करना चाहिए। अभी caniuse.com के अनुसार दुनिया भर में 46% support है

  • ध्यान रखना चाहिए कि unsupported browser इस्तेमाल करने वाले users को खराब अनुभव न मिले
  • यह महत्वपूर्ण है कि नई styling में कोई अहम जानकारी या functionality शामिल न हो

• इस फीचर का implement होना देखकर बहुत खुशी हुई। यह custom select box replacements की तुलना में कहीं बड़ा सुधार होगा

• चिंता इस बात की है कि यह built-in mobile operating system components को trigger नहीं करता। built-in components भरोसेमंद, accessible और responsive होते हैं

  • Android UI का खुलना भरोसेमंद होता है, यह अच्छी बात है। यह सिर्फ select elements पर नहीं बल्कि date/time input पर भी लागू होता है

• कुछ controls पर styling लागू न करना ही बेहतर है। scrollbar के मामले में वे बहुत पतले हो जाते हैं या color contrast खराब होता है, इसलिए उनका इस्तेमाल कठिन हो जाता है

  • default select element सबसे सुंदर control नहीं है, लेकिन अपना काम करता है

• लगता है web developers दशकों से इसी का इंतज़ार कर रहे थे। इसमें कई JS libraries को replace करने की क्षमता है

  • मेरे पास Chrome installed नहीं है, लेकिन example video में यह multi-select field को कैसे handle करता है, यह जानने की जिज्ञासा है

• अब Chromium browsers में CSS के ज़रिए select element को customize किया जा सकता है

  • web standards धीरे-धीरे और जटिल होते जा रहे हैं

• Firefox issue का link दिया गया है

• अगर ऐसा ही चलता रहा, तो जल्द ही यह VB6 के feature parity तक पहुँच जाएगा

• टूटी हुई JS libraries से तो यह बेहतर है। लेकिन options बहुत ज़्यादा होने पर layout कैसा होगा, यही सबसे बड़ी चिंता है

  • built-in mobile operating system components को trigger न करना डरावना है। layout कैसा होगा, यह जानना चाहता हूँ
  • दिखाए गए options को anchor() से position किया जाता है
  • यह experimental है, लेकिन शायद यही हिस्सा सबसे अच्छा साबित हो सकता है। अगर यह CSS में सचमुच काम करता है, तो यह कमाल होगा

[carnoxen]

तो क्या अब <selectlist> की ज़रूरत नहीं रहेगी?

[deminoth]

अलग बात है, लेकिन Slackbot में शीर्षक का <select> दिख नहीं रहा है, haha

[xguru]

अरे, इसे मैं बाद में ठीक कर दूँगा।