چارگوش‌های انتخاب سبک‌بندی

از HTML معنایی و دسترس‌پذیر استفاده کنید و هر چارگوش انتخاب را با برچسب آن مرتبط کنید، چه با تودرتو کردن <input> در داخل <label> یا با مطابقت دادن ویژگی for برچسب با id ورودی.

CSS مدرن دو رویکرد برای سبک‌دهی به چارگوش‌های انتخاب ارائه می‌دهد: سفارشی‌سازی ظاهر بومی با accent-color، یا لغو ارائه پیش‌فرض با appearance: none در عنصر <input type="checkbox">.

سفارشی‌سازی داخلی با 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 تنظیم کرد؛ ویژگی indeterminate DOM را در جاوا اسکریپت (checkbox.indeterminate = true) تنظیم کنید و مطمئن شوید که شبه‌کلاس :indeterminate ازنظر بصری هم از :checked و هم از وضعیت‌های علامت‌نزده متمایز است:

• بومی (accent-color): به‌طور خودکار توسط مرورگر بااستفاده از accent-color عنصر (بدون نیاز به قانون :indeterminate CSS اضافی) سبک‌بندی می‌شود.
• سفارشی (appearance: none): --checkbox-icon را با var(--icon-dash) در .checkbox-custom:indeterminate جابه‌جا کنید (همان‌طور که در بالا نشان داده شده است).

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

دسترس‌پذیری و تعامل

• باید از :focus-visible به‌جای :focus برای سبک‌دهی به نشانگرهای تمرکز در چارگوش‌های انتخاب سفارشی استفاده کنید تا طرح کلی متمایزی برای پیمایش صفحه‌کلید ظاهر شود بدون اینکه در کلیک‌های اشاره‌گر نشان داده شود.
• از 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 از آن‌ها مطلع باشید

پرداخت accent-color در مرورگر متفاوت است. برای نشانگرهایی که معمولاً روی پس‌زمینه رنگ ثانویه کشیده می‌شوند، مانند علامت‌های چارگوش انتخاب و نقطه‌های دکمه رادیویی، مرورگرها ممکن است رفتارهای متفاوتی اعمال کنند:

• Chromium و Firefox معمولاً رنگ نشانگر متضادی را انتخاب می‌کنند.
• Safari ممکن است به‌جای آن، نشانگر سفید را در حالت روشن یا نشانگر سیاه را در حالت تیره حفظ کند و درعین‌حال رنگ ثانویه پشت آن را تغییر دهد. این تنظیم همیشه کنتراست کافی برای هر رنگ ارائه‌شده فراهم نمی‌کند، بنابراین ترکیب‌های مهم را در Safari آزمایش کنید، ازجمله طرح‌های رنگی روشن و تیره. فرض نکنید که Safari به‌طور خودکار رنگ نشانگری را انتخاب می‌کند که بهترین کنتراست را ارائه می‌دهد.

راهبردهای جایگزین

پشتیبانی مرورگر و جایگزین‌ها برای accent-color

خصوصیت accent-color ارتقای پیش‌رو است. مرورگرهایی که از این ویژگی پشتیبانی نمی‌کنند آن را نادیده می‌گیرند و از رنگ‌های واسط کاربر پیش‌فرض خود استفاده می‌کنند.

ماسک‌های CSS