इस मॉड्यूल में, फ़ॉर्म कंट्रोल को स्टाइल करने के तरीके बताए गए हैं. साथ ही, साइट की अन्य स्टाइल के साथ मैच करने का तरीका भी बताया गया है.
विकल्प चुनने में उपयोगकर्ताओं की मदद करें
<select> एलिमेंट
<select> एलिमेंट की डिफ़ॉल्ट स्टाइल बढ़िया नहीं दिखती हैं. साथ ही, अलग-अलग ब्राउज़र पर यह एक जैसा नहीं दिखता है.
सबसे पहले, चलिए तीरों को बदलते हैं.
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
background-image: url(arrow.png);
background-repeat: no-repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto;
}
<select> एलिमेंट के डिफ़ॉल्ट ऐरो हटाने के लिए,
सीएसएस appearance प्रॉपर्टी का इस्तेमाल करें.
अपनी पसंद का ऐरो दिखाने के लिए, ऐरो को background के तौर पर सेट करें.
आपको अपने <select> एलिमेंट के लिए, font-size को कम से कम 1rem में बदलना चाहिए.
ज़्यादातर ब्राउज़र के लिए, डिफ़ॉल्ट वैल्यू 16 पिक्सल होती है.
ऐसा करने से, फ़ॉर्म कंट्रोल के फ़ोकस होने पर, iOS Safari पर पेज को ज़ूम नहीं किया जा सकेगा.
हालांकि, अपने ब्रैंड के रंगों से मैच करने के लिए एलिमेंट के रंग भी बदले जा सकते हैं.
स्पेसिंग, :hover, और :focus के लिए कुछ और स्टाइल जोड़ने के बाद,
सभी ब्राउज़र पर <select> एलिमेंट एक जैसा दिखता है.
नीचे दिए गए डेमो में इसे देखें. 'सिलेक्ट लाइक इट 2019' को स्टाइल करना लेख पढ़ें.
<option> एलिमेंट के बारे में क्या? <option> एलिमेंट को बदला गया एलिमेंट कहा जाता है, जिसका प्रज़ेंटेशन सीएसएस के दायरे से बाहर है.
यह लिखने के दौरान, <option> एलिमेंट को स्टाइल नहीं किया जा सकता.
चेकबॉक्स और रेडियो बटन
हर ब्राउज़र पर <input type="checkbox"> और <input type="radio"> अलग-अलग तरह से दिखते हैं.
अंतर देखने के लिए अलग-अलग ब्राउज़र पर डेमो खोलें. आइए, यह पक्का करने का तरीका देखते हैं कि चेकबॉक्स और रेडियो बटन आपके ब्रैंड से मेल खाते हैं और एक ही क्रॉस-ब्राउज़र से दिखते हैं.
पहले डेवलपर <input type="checkbox"> और <input type="radio"> कंट्रोल को सीधे स्टाइल नहीं कर सकते थे.
चेकबॉक्स और रेडियो बटन को उनके स्यूडो एलिमेंट के ज़रिए स्टाइल किया जा सकता है.
या नीचे दी गई रीप्लेसमेंट तकनीक का इस्तेमाल करके, इन एलिमेंट के लिए अपनी पसंद के मुताबिक स्टाइल बनाए जा सकते हैं.
पहला, डिफ़ॉल्ट चेकबॉक्स और रेडियो बटन को विज़ुअल तौर पर छिपाएं.
input[type="radio"],
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
display: none या visibility: hidden के बजाय opacity: 0 के साथ position: absolute का इस्तेमाल करना ज़रूरी है, ताकि कंट्रोल सिर्फ़ विज़ुअल तौर पर छिपे रहें. इससे यह पक्का होगा कि वे अब भी ब्राउज़र के
सुलभता ट्री की वजह से दिख रहे हैं या नहीं. ध्यान दें कि यह पक्का करने के लिए और स्टाइल की ज़रूरत हो सकती है कि विज़ुअल तौर पर छिपे हुए फ़ॉर्म कंट्रोल, बदले जाने वाले एलिमेंट के "सबसे ऊपर" रहें. ऐसा करने से, जब स्क्रीन रीडर चालू होता है, तब इन एलिमेंट पर कर्सर घुमाया जाता है या स्क्रीन रीडर के चालू किए गए टच डिवाइसों का इस्तेमाल किया जाता है, तो स्क्रीन रीडर का इस्तेमाल करते समय, विज़ुअल छिपे हुए कंट्रोल खोजे जा सकेंगे. साथ ही, स्क्रीन रीडर का दिखने वाला फ़ोकस इंडिकेटर, आम तौर पर स्क्रीन पर रेंडर की गई जगह में दिखेगा.
कस्टम चेकबॉक्स और रेडियो बटन दिखाने के लिए, आपके पास अलग-अलग विकल्प हैं.
::before सीएसएस स्यूडो-एलिमेंट और सीएसएस background प्रॉपर्टी का इस्तेमाल किया जाता है या इनलाइन SVG इमेज का इस्तेमाल किया जा सकता है.
input[type="radio"] + label::before {
content: "";
width: 1em;
height: 1em;
border: 1px solid black;
display: inline-block;
border-radius: 50%;
margin-inline-end: 0.5em;
}
input[type="radio"]:checked + label::before {
background: black;
}
सीएसएस का इस्तेमाल करके, यह पक्का किया जा सकता है कि चेकबॉक्स और रेडियो बटन, आपके ब्रैंड की स्टाइल से मेल खाते हों.
<input type="checkbox">, <input type="radio">, और कस्टम चेकबॉक्स स्टाइल
को स्टाइल करने के बारे में ज़्यादा जानें.
फ़ॉर्म कंट्रोल के लिए, अपनी साइट के रंगों का इस्तेमाल करने का तरीका
क्या आप अपनी साइट की स्टाइल को एक लाइन के कोड से कंट्रोल करना चाहते हैं?
इसके लिए, accent-color सीएसएस प्रॉपर्टी का इस्तेमाल किया जा सकता है.
checkbox {
accent-color: orange;
}
जांचें कि आपको कितना समझ आया
स्टाइल वाले फ़ॉर्म कंट्रोल के बारे में अपनी जानकारी को परखें
फ़ॉर्म कंट्रोल की प्लैटफ़ॉर्म-नेटिव स्टाइल को कैसे हटाया जा सकता है?
revert: all; का इस्तेमाल किया जा रहा है.appearance: none; का इस्तेमाल किया जा रहा है.appearance: revert; का इस्तेमाल किया जा रहा है.revert: appearance; का इस्तेमाल किया जा रहा है.