CSS चेकबॉक्स जनरेटर

CSS Checkbox Generator

24 चेकबॉक्स टेम्पलेट: आठ निशान × तीन बदलाव; मूल पूर्वावलोकन क्लिक या स्पेस से जाँचें।

लोकल प्रोसेसिंग

बग रिपोर्ट करें

फ़ॉर्म कंट्रोल

CSS चेकबॉक्स जनरेटर

नेटिव चेक स्टेट बनाए रखते हुए एक्सेसिबल कस्टम चेकबॉक्स बनाएँ।

टेम्पलेट · 24

श्रेणी, आकृति और गति चुनें। हर टेम्पलेट आकार या उसकी गति बदलता है।

श्रेणी

1 / 2

लाइव प्रीव्यू

CSS एक्सपोर्ट करने से पहले कंट्रोल एडजस्ट करके इफ़ेक्ट जाँचें।

मान्य CSS

प्रिसिशन मोड चालू करें

03 / CSS.checkbox

860 B · लाइव

.checkbox {
  box-sizing: border-box;
  appearance: none;
  display: inline-grid;
  place-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 2px solid #566076;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
}

.checkbox::before {
  box-sizing: content-box;
  content: "";
  width: 6px;
  height: 12px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg) scale(0);
  transition: transform 160ms ease;
}

.checkbox:checked {
  border-color: #0f4cff;
  background: #0f4cff;
}

.checkbox:checked::before { transform: translateY(-1px) rotate(45deg) scale(1); }
.checkbox:focus-visible { outline: 3px solid #0f4cff; outline-offset: 3px; }
.checkbox:disabled { cursor: not-allowed; opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .checkbox::before { transition: none; }
}

टास्क पथ / इनपुट से परिणाम तक

कस्टम CSS चेकबॉक्स कैसे डिज़ाइन करें

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

टूल के तथ्य

प्रोसेसिंग: आपके ब्राउज़र में
इनपुट इस डिवाइस से बाहर जाता है: कभी नहीं
रिटेंशन: कुछ भी स्टोर नहीं होता
कीमत: मुफ़्त

आपका इनपुट ब्राउज़र में ही रहता है।

CSS चेकबॉक्स जनरेटर अपना सत्यापित लोकल एक्ज़ीक्यूशन पथ इस्तेमाल करता है और कोई छिपा इनपुट या आउटपुट इतिहास नहीं बनाता।

लोकल एक्ज़ीक्यूशन

मौजूदा ब्राउज़र टैब के अंदर चलता है।

कोई छिपी प्रोसेसिंग नहीं

सक्रिय टूल डेटा कभी Toolars दस्तावेज़ रिकॉर्ड नहीं बनता।

खाते की ज़रूरत नहीं

बिना प्रोफ़ाइल बनाए मुख्य वर्कफ़्लो इस्तेमाल करें। साइन इन करने के बाद फ़ेवरिट आपके खाते से सिंक होते हैं।

तुरंत रीसेट

टैब साफ़ करें और सक्रिय कार्य डेटा गायब।

CSS चेकबॉक्स जनरेटर असल में क्या करता है

डिफ़ॉल्ट चेकबॉक्स से भरा सेटिंग्स पेज अधूरा लगता है, और डिज़ाइन सिस्टम को हर फ़ॉर्म में वही कंट्रोल चाहिए, बिना JavaScript डिपेंडेंसी घसीटे। क्योंकि एक्सपोर्ट किया गया CSS असली input एलिमेंट बरकरार रखता है, कीबोर्ड फ़ोकस और स्क्रीन-रीडर घोषणाएं काम करती रहती हैं — जबकि आज़माए जा रहे ब्रांड रंग ब्राउज़र टैब से बाहर नहीं जाते। कोई कोड कॉपी करने से पहले पूर्वावलोकन टॉगल का एक झटका इंटरैक्शन के दोनों पक्षों की पुष्टि कर देता है। वही नियम एक फ़ॉर्म के लिए भी काम करता है और पूरी कंपोनेंट लाइब्रेरी के लिए भी।

आम सवाल

क्या चेकबॉक्स अब भी ऐक्सेसिबल है?

हां। मार्कअप असली input एलिमेंट ही रहता है; appearance: none सिर्फ़ उसका पेंटिंग बदलता है। एक्सपोर्ट में आपके एक्सेंट रंग का 3 px :focus-visible आउटलाइन और मंद :disabled स्थिति शामिल है, और चेक्ड स्थिति वही नेटिव रहती है जिसे असिस्टिव टेक्नोलॉजी घोषित करती है। 24 चेकबॉक्स टेम्पलेट: आठ निशान × तीन बदलाव; मूल पूर्वावलोकन क्लिक या स्पेस से जाँचें। HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।

मेरा बॉर्डर क्यों अस्वीकार हुआ?

18–64 px का कंट्रोल और 1–8 px का बॉर्डर इस्तेमाल करें। मार्क के लिए बॉर्डर के अंदर कम से कम 8 px बचना चाहिए। अमान्य कॉम्बिनेशन पूर्वावलोकन खाली कर देते हैं और एक्सपोर्ट बंद कर देते हैं।

चेक मार्क का आकार कैसे तय होता है?

ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: मार्क बाहरी साइज़ के बजाय बॉर्डर के अंदर की जगह से स्केल होता है। पूर्वावलोकन और एक्सपोर्ट एक ही CSS बॉर्डर आकार इस्तेमाल करते हैं। पूर्वावलोकन पर क्लिक करें या उसे फ़ोकस करके Space दबाएं ताकि उसकी नेटिव चेक स्थिति बदल जाए।

चेकबॉक्स की स्थिति बदलने पर क्या होता है?

ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: मार्क 160 ms के ट्रांसफ़ॉर्म ट्रांज़िशन में शून्य से पूर्ण आकार तक स्केल होता है, जबकि बैकग्राउंड आपके चेक्ड रंग से भर जाता है। prefers-reduced-motion के तहत ट्रांज़िशन हटा दिया जाता है और स्थिति सीधे बदल जाती है, इसलिए मोशन-संवेदनशील उपयोगकर्ताओं के लिए कुछ भी एनिमेट नहीं होता।

एक्सपोर्ट में क्या तय है और मैं क्या बदल सकता/सकती हूँ?

ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: विश्राम बैकग्राउंड और मार्क हमेशा सफ़ेद रहते हैं, इसलिए सफ़ेद के मुकाबले पर्याप्त कंट्रास्ट वाला चेक्ड रंग चुनें। 3 px फ़ोकस आउटलाइन, उसका ऑफ़सेट और आधी ओपेसिटी वाली :disabled स्थिति तय मान हैं, जिन्हें नियम पेस्ट करने के बाद आप आज़ादी से संपादित कर सकते हैं।

क्या कुछ अपलोड होता है?

नहीं। सब कुछ मौजूदा टैब में लोकल रूप से रेंडर होता है, किसी खाते की ज़रूरत नहीं, और कोई मान स्टोरेज, लॉग या नेटवर्क में नहीं जाता। डिफ़ॉल्ट पर लौटने के लिए रीसेट दबाएं।

CSS चेकबॉक्स जनरेटर

प्रोसेसिंग का विवरण

CSS चेकबॉक्स जनरेटर

टेम्पलेट · 24

लाइव प्रीव्यू

कस्टम CSS चेकबॉक्स कैसे डिज़ाइन करें

कंट्रोल का साइज़ सेट करें

फ्रेम को आकार दें

स्थिति के रंग चुनें

दोनों स्थितियों का पूर्वावलोकन करें

CSS कॉपी या डाउनलोड करें

मार्कअप को नेटिव रखें

टूल के तथ्य

आपका इनपुट ब्राउज़र में ही रहता है।

लोकल एक्ज़ीक्यूशन

कोई छिपी प्रोसेसिंग नहीं

खाते की ज़रूरत नहीं

तुरंत रीसेट

CSS चेकबॉक्स जनरेटर असल में क्या करता है

संबंधित काम, कोई बंद गली नहीं।

CSS लोडिंग एनिमेशन जनरेटर

CSS टॉगल स्विच जनरेटर

CSS क्लिप पाथ जनरेटर

CSS बैकग्राउंड पैटर्न जनरेटर

CSS चेकबॉक्स जनरेटर

टेम्पलेट · 24

लाइव प्रीव्यू