עיצוב תיבות סימון

משתמשים ב-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 הוא שיפור הדרגתי (progressive enhancement). דפדפנים שלא תומכים במאפיין הזה יתעלמו ממנו וישתמשו בצבעי ברירת המחדל של ממשק המשתמש שלהם.

מסכות CSS