फ़ॉर्म कंट्रोल को शैली देना

इस मॉड्यूल में, आप जानते हैं कि फ़ॉर्म कंट्रोल को कैसे स्टाइल दें और अपनी साइट की अन्य स्टाइल को कैसे मिलाएं.

विकल्प चुनने में उपयोगकर्ताओं की मदद करें

<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 के तौर पर सेट करें.

आपको font-size को भी कम से कम 1rem में बदलना चाहिए (ज़्यादातर ब्राउज़र में इसकी डिफ़ॉल्ट वैल्यू 16px होती है) आपके <select> एलिमेंट के लिए. ऐसा करने से फ़ॉर्म के कंट्रोल पर फ़ोकस होने पर, 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 सीएसएस pseudo-element और CSS 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;
}

देखें कि आपको कितना समझ आया है

स्टाइलिंग फ़ॉर्म कंट्रोल के बारे में अपनी जानकारी को परखें

संसाधन

• एक्सेंट रंग
• <select> एलिमेंट की स्टाइल
• स्टाइल वाले फ़ॉर्म कंट्रोल की सुलभता
• यूज़र इंटरफ़ेस (यूआई) खोलें