চেকবক্স স্টাইল করা

প্রতিটি চেকবক্সের সাথে সেটির লেবেল যুক্ত করে সিম্যান্টিক, অ্যাক্সেসযোগ্য HTML ব্যবহার করুন, হয় <label>-এর মধ্যে <input> নেস্ট করে অথবা ইনপুটের id-এর সাথে লেবেলের for অ্যাট্রিবিউট ম্যাচ করে।

আধুনিক CSS-এ চেকবক্স স্টাইল করার দুটি পদ্ধতি আছে: 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;
  }
}

অনির্ধারিত স্ট্যাটাস

HTML অ্যাট্রিবিউটের মাধ্যমে অনির্দিষ্ট অবস্থা সেট করা যাবে না; JavaScript-এ (checkbox.indeterminate = true) indeterminate DOM প্রপার্টি সেট করুন এবং নিশ্চিত করুন যে :indeterminate ছদ্ম-শ্রেণিটি :checked এবং টিকচিহ্ন না দেওয়া অবস্থা থেকে দৃশ্যত আলাদা:

• নেটিভ (accent-color): এলিমেন্টের accent-color ব্যবহার করে ব্রাউজার অটোমেটিক স্টাইল করে (অতিরিক্ত কোনও :indeterminate CSS নিয়মের প্রয়োজন নেই)।
• কাস্টম (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 প্রপার্টি হল প্রোগ্রেসিভ এনহ্যান্সমেন্ট। যেসব ব্রাউজারে এই প্রপার্টি কাজ করে না, সেগুলি এটি উপেক্ষা করবে এবং ডিফল্ট UI কালার ব্যবহার করবে।

CSS মাস্ক