चेकबॉक्स को स्टाइल करना

सिमैंटिक और ऐक्सेस किए जा सकने वाले एचटीएमएल का इस्तेमाल करें. इसमें हर चेकबॉक्स को उसके लेबल से जोड़ें. इसके लिए, <input> को <label> के अंदर नेस्ट करें या लेबल के for एट्रिब्यूट को इनपुट के id से मैच करें.

मॉडर्न सीएसएस में, चेकबॉक्स को स्टाइल करने के दो तरीके हैं: accent-color का इस्तेमाल करके नेटिव लुक को पसंद के मुताबिक बनाएं या <input type="checkbox"> एलिमेंट पर appearance: none का इस्तेमाल करके डिफ़ॉल्ट प्रज़ेंटेशन को बदलें.

accent-color के साथ नेटिव कस्टमाइज़ेशन

ब्रैंड के हिसाब से आसान स्टाइलिंग के लिए, accent-color का इस्तेमाल करें. इससे नेटिव रेंडरिंग, कीबोर्ड के काम करने का तरीका, पुष्टि, और ऑपरेटिंग सिस्टम के फ़ोकस इंडिकेटर बने रहते हैं.

.checkbox-native {
  accent-color: #1a73e8;

  /* Sizing is controlled via relative units */
  inline-size: 1.25em;
  aspect-ratio: 1;
  margin: 0;
  cursor: pointer;
}

appearance: none की मदद से, स्टाइल को पूरी तरह से पसंद के मुताबिक बनाने की सुविधा

appearance: none का इस्तेमाल तब करें, जब डिज़ाइन के लिए चेकबॉक्स के आकार, साइज़, स्थितियों या इंडिकेटर को कंट्रोल करना ज़रूरी हो. इससे नेटिव विज़ुअल स्टाइल हट जाती है. हालांकि, <input> इंटरैक्टिव टारगेट के तौर पर बना रहता है.

--checkbox-size और --checkbox-icon-size के लिए, साफ़ तौर पर रिलेटिव साइज़ सेट करें, क्योंकि appearance: none ब्राउज़र के डिफ़ॉल्ट डाइमेंशन हटा देता है. आइकॉन को चेकबॉक्स से छोटा रखें, ताकि उसके बॉर्डर और विज़ुअल पैडिंग के लिए जगह मिल सके.

/* Reusable SVG assets */
:root {
  --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>");
  --icon-dash: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'></line></svg>");
}

/* Custom checkbox */
.checkbox-custom {
  --checkbox-size: 1.25em;
  --checkbox-icon-size: 0.7em;

  appearance: none;
  display: inline-grid;
  place-content: center;
  inline-size: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  border: 2px solid currentColor;
  cursor: pointer;

  &::before {
    content: "";
    inline-size: var(--checkbox-icon-size);
    aspect-ratio: 1;
    background-color: currentColor;
    mask: var(--checkbox-icon) no-repeat center / contain;
    scale: 0;

    @media (prefers-reduced-motion: no-preference) {
      transition: scale 150ms ease;
    }

    @media (forced-colors: active) {
      background-color: CanvasText;
    }
  }

  &:checked {
    --checkbox-icon: var(--icon-check);
  }

  &:indeterminate {
    --checkbox-icon: var(--icon-dash);
  }

  &:is(:checked, :indeterminate)::before {
    scale: 1;
  }

  &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

अनिश्चित स्थिति

अनिश्चित स्थिति को एचटीएमएल एट्रिब्यूट के ज़रिए सेट नहीं किया जा सकता. JavaScript (checkbox.indeterminate = true) में indeterminate DOM प्रॉपर्टी सेट करें और पक्का करें कि :indeterminate स्यूडो-क्लास, :checked और सही का निशान न लगी हुई, दोनों स्थितियों से अलग दिखे:

• नेटिव (accent-color): एलिमेंट के accent-color का इस्तेमाल करके, ब्राउज़र अपने-आप स्टाइल तय करता है. इसके लिए, किसी अतिरिक्त :indeterminate सीएसएस नियम की ज़रूरत नहीं होती.
• कस्टम (appearance: none): .checkbox-custom:indeterminate पर --checkbox-icon को var(--icon-dash) से बदलें, जैसा कि ऊपर दिखाया गया है.

const selectAll = document.querySelector("#select-all");
selectAll.indeterminate = true;

सुलभता और इंटरैक्शन

• कस्टम चेकबॉक्स पर फ़ोकस इंडिकेटर को स्टाइल करने के लिए, :focus के बजाय :focus-visible का इस्तेमाल करें. इससे कीबोर्ड नेविगेशन के लिए एक अलग आउटलाइन दिखती है. हालांकि, यह पॉइंटर क्लिक पर नहीं दिखती.
• चेकबॉक्स पर outline: none का इस्तेमाल न करें या फ़ोकस इंडिकेटर न छिपाएं.

• ज़रूर पक्का करें कि चेकबॉक्स या उसके रैपिंग <label> में कम से कम 44px x 44px का इंटरैक्टिव हिट टारगेट हो. साथ ही, विज़ुअल चेकबॉक्स बॉक्स का साइज़ रिलेटिव यूनिट में रखें:

  label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-block-size: 44px;
    cursor: pointer;
  }
  

• :disabled स्टाइल वैरिएंट ज़रूर दें, जो ओपैसिटी को कम करता है और cursor: not-allowed को सेट करता है, ताकि इनऐक्टिव स्टेटस साफ़ तौर पर दिखें.

ऐक्सेंट कलर का इस्तेमाल करते समय ध्यान रखने वाली बातें

accent-color की ब्राउज़र रेंडरिंग अलग-अलग होती है. आम तौर पर, ऐक्सेंट कलर वाले बैकग्राउंड पर दिखने वाले इंडिकेटर, जैसे कि चेकबॉक्स के निशान और रेडियो-बटन के बिंदु, ब्राउज़र पर अलग-अलग तरह से दिख सकते हैं:

• Chromium और Firefox आम तौर पर, इंडिकेटर के लिए कंट्रास्ट कलर चुनते हैं.
• Safari, हल्के रंग वाले मोड में सफ़ेद रंग का इंडिकेटर या गहरे रंग वाले मोड में काले रंग का इंडिकेटर बनाए रख सकता है. साथ ही, इसके पीछे के ऐक्सेंट कलर में बदलाव कर सकता है. यह बदलाव, हर रंग के लिए ज़रूरी कंट्रास्ट नहीं देता. इसलिए, Safari में ज़रूरी कॉम्बिनेशन की जांच करें. इसमें लाइट और डार्क, दोनों कलर स्कीम शामिल हैं. यह न मानें कि Safari अपने-आप सबसे अच्छा कंट्रास्ट देने वाला इंडिकेटर कलर चुन लेगा.

फ़ॉलबैक रणनीतियां

accent-color के लिए फ़ॉलबैक और ब्राउज़र सहायता

accent-color प्रॉपर्टी, परतदार वृद्धि है. इस प्रॉपर्टी के साथ काम न करने वाले ब्राउज़र, इसे अनदेखा कर देंगे और अपने डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) के रंगों का इस्तेमाल करेंगे.

सीएसएस मास्क