ब्राउज़र से जनरेट किए गए यूज़र इंटरफ़ेस (यूआई) की थीम सेट करना

ब्राउज़र से जनरेट किए गए ज़्यादातर यूज़र इंटरफ़ेस (यूआई) को सीएसएस का इस्तेमाल करके, कुछ हद तक पसंद के मुताबिक बनाया जा सकता है. भले ही, इसके लिए नई सुविधाओं की ज़रूरत हो, लेकिन यह पुराने ब्राउज़र पर भी ठीक से काम करता है. इसलिए, आम तौर पर इसके लिए polyfill या फ़ॉलबैक की ज़रूरत नहीं होती.

ब्राउज़र यूज़र इंटरफ़ेस (यूआई) (फ़ॉर्म कंट्रोल, स्क्रोलबार, चुने गए विकल्प, गड़बड़ी के मैसेज वगैरह) को फिर से बनाने से पहले, यह पुष्टि करें कि:

1. ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) को आपकी ज़रूरत के हिसाब से कस्टमाइज़ नहीं किया जा सकता. भले ही, मॉडर्न सीएसएस का इस्तेमाल किया जा रहा हो,
2. पसंद के मुताबिक बनाया गया यूज़र इंटरफ़ेस (यूआई) इतना ज़रूरी हो कि पहले से मौजूद यूज़र इंटरफ़ेस (यूआई) को फिर से बनाने के लिए, कुछ सुविधाओं को छोड़ने का फ़ैसला सही लगे. जैसे, ऐक्सेस किए जा सकने वाले सिमैंटिक, कीबोर्ड हैंडलिंग, आईएमई, और एटी इंटिग्रेशन को छोड़ना. ये सुविधाएं, नेटिव यूज़र इंटरफ़ेस (यूआई) में बिना किसी शुल्क के मिलती हैं.

कस्टमाइज़ेशन के उदाहरण:

• हाइलाइट किए गए टेक्स्ट के रंगों को पसंद के मुताबिक बनाने के लिए, ::selection का इस्तेमाल करें.
• कॉन्टेंट के टेक्स्ट पर user-select: none लागू न करें. इससे कॉपी-पेस्ट, अनुवाद करने वाले टूल, और एटी "यहां से पढ़ें" जेस्चर काम नहीं करते. इसे Chrome तक सीमित रखें (हैंडल, टूलबार, ग़ैर-ज़रूरी बटन लेबल खींचें और छोड़ें).
• ब्राउज़र से जनरेट किए गए किसी भी यूज़र इंटरफ़ेस (यूआई) पर, पेज के ऐक्सेंट कलर को लागू करने के लिए, accent-color का इस्तेमाल करें.
• ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) को हल्के/गहरे रंग वाले मोड के हिसाब से अडजस्ट करने के लिए, color-scheme का इस्तेमाल करें.
• स्क्रोलबार के रंगों को पसंद के मुताबिक बनाने के लिए scrollbar-color का इस्तेमाल करें. साथ ही, स्क्रोलबार की मोटाई को कंट्रोल करने के लिए scrollbar-width का इस्तेमाल करें. थंब को ट्रैक से साफ़ तौर पर अलग रखें (≥3:1). इसके अलावा, स्क्रोल किए जा सकने वाले हिस्सों पर scrollbar-width: none सेट न करें. इसका इस्तेमाल सिर्फ़ तब करें, जब स्क्रोल करने की सुविधा को पूरी तरह से किसी अन्य सुविधा से बदल दिया गया हो.
• मान्यता की स्टाइलिंग के लिए, :user-invalid / :user-valid का इस्तेमाल करें, न कि :invalid / :valid का — ये सिर्फ़ तब मैच होते हैं, जब उपयोगकर्ता ने फ़ील्ड के साथ इंटरैक्ट किया हो. इससे पेज लोड होने पर, ज़रूरी-खाली फ़ील्ड को गड़बड़ियों के तौर पर फ़्लैग करने की डिफ़ॉल्ट सेटिंग से बचा जा सकता है. input को बड़े पैमाने पर टारगेट करते समय, रेंज स्लाइडर को शामिल न करें (उदाहरण के लिए, input:not(input[type="range"]):user-valid). इससे स्लाइडर में बदलाव करने पर, फ़ील्ड की मान्यताओं के बॉर्डर या बैकग्राउंड लागू नहीं होते.
• बटन और टेक्स्ट फ़ील्ड (इनमें <textarea> भी शामिल है) को आम तौर पर सामान्य एलिमेंट की तरह स्टाइल किया जा सकता है.
• स्केल करने के लिए font-size का इस्तेमाल करें. साथ ही, टाइपोग्राफ़ी को कंट्रोल करने के लिए, टेक्स्ट से जुड़ी अन्य प्रॉपर्टी का इस्तेमाल करें

टेक्स्ट वाले फ़ील्ड को स्टाइल करना (<input> और <textarea>)

ज़्यादातर स्टाइलिंग के लिए (जैसे, रंग, बॉर्डर, बैकग्राउंड, टाइपोग्राफ़ी वगैरह), इन एलिमेंट को सामान्य टेक्स्ट कंटेनर के तौर पर इस्तेमाल करें.

• इनपुट प्लेसहोल्डर को स्टाइल करने के लिए, :placeholder-shown और ::placeholder का इस्तेमाल करें.
• टेक्स्ट फ़ील्ड के साइज़ को कॉन्टेंट के हिसाब से सेट करने के लिए, field-sizing: content का इस्तेमाल करें.
• <textarea> एलिमेंट के लिए, हॉरिज़ॉन्टल रीसाइज़िंग को बंद करने के लिए resize: vertical का इस्तेमाल करें या सभी रीसाइज़िंग को बंद करने के लिए resize: none का इस्तेमाल करें.

जवाबों के कई विकल्पों वाले कंट्रोल (चुनें, रेडियो, चेकबॉक्स)

• ड्रॉपडाउन में मौजूद कई विकल्पों में से किसी एक को चुनने के लिए: <select> + appearance: base-select + ::picker(select) का इस्तेमाल करें. ज़्यादा जानकारी के लिए, ब्रैंडेड सेलेक्ट स्टाइलिंग देखें
• पेज पर इनलाइन लेआउट में मौजूद कई विकल्पों में से एक या उससे ज़्यादा विकल्प चुनना: हर विकल्प के लिए, <label> के अंदर <input type=checkbox> या <input type=radio> का इस्तेमाल करें. label:has(:checked) के ज़रिए स्टाइल करें.
• appearance: none + जनरेट किए गए कॉन्टेंट (::before/::after) या बैकग्राउंड इमेज की मदद से, चेकबॉक्स, रेडियो बटन, और स्विच को स्टाइल करें, ताकि चेक की गई स्थिति को दिखाया जा सके.

बिना टेक्स्ट वाले <input> (बटन, स्लाइडर, फ़ाइल इनपुट वगैरह)

• फ़ाइल इनपुट: बटन को स्टाइल करने के लिए, ::file-selector-button का इस्तेमाल करें.
• <input> का इस्तेमाल, button, submit या reset के type के साथ न करें. इसके बजाय, <button> का इस्तेमाल करें और इसे सामान्य एलिमेंट की तरह स्टाइल करें.
• स्लाइडर: ज़्यादा बेहतर कंट्रोल के लिए, appearance: none + थंब स्यूडो-एलिमेंट (::-webkit-slider-thumb, ::-moz-range-thumb वगैरह) और ट्रैक स्यूडो-एलिमेंट (::-webkit-slider-runnable-track, ::-moz-range-track वगैरह) का इस्तेमाल करें.