تنسيق مربّعات الاختيار

استخدِم ترميز 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، بل يجب ضبط سمة DOM‏ indeterminate في JavaScript (checkbox.indeterminate = true) والتأكّد من أنّ الفئة الزائفة :indeterminate تختلف بصريًا عن حالتَي :checked وإزالة العلامة من المربّع:

• أصلي (accent-color): يتم تنسيقه تلقائيًا بواسطة المتصفّح باستخدام السمة accent-color للعنصر (لا حاجة إلى قاعدة CSS إضافية للسمة :indeterminate).
• مخصّص (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