टास्क पथ / इनपुट से परिणाम तक
कस्टम CSS चेकबॉक्स कैसे डिज़ाइन करें
- 01
कंट्रोल का साइज़ सेट करें
मार्क बाहरी साइज़ के बजाय बॉर्डर के अंदर की जगह से स्केल होता है। पूर्वावलोकन और एक्सपोर्ट एक ही CSS बॉर्डर आकार इस्तेमाल करते हैं। पूर्वावलोकन पर क्लिक करें या उसे फ़ोकस करके Space दबाएं ताकि उसकी नेटिव चेक स्थिति बदल जाए।
- 02
फ्रेम को आकार दें
18–64 px का कंट्रोल और 1–8 px का बॉर्डर इस्तेमाल करें। मार्क के लिए बॉर्डर के अंदर कम से कम 8 px बचना चाहिए। अमान्य कॉम्बिनेशन पूर्वावलोकन खाली कर देते हैं और एक्सपोर्ट बंद कर देते हैं।
- 03
स्थिति के रंग चुनें
विश्राम आउटलाइन के लिए बॉर्डर रंग और भरी हुई स्थिति के लिए चेक्ड रंग चुनें। चेक्ड रंग को इतना गहरा रखें कि उसके पीछे बैठे सफ़ेद मार्क के साथ कंट्रास्ट बना रहे, क्योंकि मार्क खुद हमेशा सफ़ेद होता है।
- 04
दोनों स्थितियों का पूर्वावलोकन करें
लाइव पूर्वावलोकन में विश्राम और भरे हुए पक्षों की तुलना करने के लिए चेक्ड स्थिति दिखाएं टॉगल करें। मार्क छोटे स्केल-अप के साथ 160 ms में ट्रांज़िशन करता आता है — ठीक वही मोशन जो एक्सपोर्ट किया गया CSS दो स्थितियों के बीच दोहराता है।
- 05
CSS कॉपी या डाउनलोड करें
toolars-checkbox.css सहेजने के लिए CSS कॉपी करें या .css डाउनलोड करें दबाएं। रूलसेट नीचे एक असली input रखता है — appearance: none सिर्फ़ उसे दोबारा पेंट करता है — और :focus-visible तथा :disabled स्थितियां एक्सपोर्ट में शामिल आती हैं।
- 06
मार्कअप को नेटिव रखें
.checkbox क्लास सीधे किसी असली input एलिमेंट पर लगाएं और किसी भी चेकबॉक्स की तरह उसे label के साथ जोड़ें। कीबोर्ड फ़ोकस, क्लिक व्यवहार और असिस्टिव-टेक्नोलॉजी घोषणाएं काम करती रहती हैं क्योंकि कोई भी सिमेंटिक चीज़ बदली नहीं जाती। विश्राम अवस्था की सफ़ेद बैकग्राउंड नियम का हिस्सा है, इसलिए रंगीन सतहों पर भी खाली स्थिति साफ़ पढ़ी जाती है।