Kästchen formatieren

Verwenden Sie semantisches, barrierefreies HTML, wobei jedes Kästchen mit seinem Label verknüpft ist. Dazu können Sie entweder das <input>-Element im <label>-Element verschachteln oder das for-Attribut des Labels mit dem id-Attribut des Eingabeelements abgleichen.

Modernes CSS bietet zwei Ansätze zum Gestalten von Kästchen: Sie können das native Erscheinungsbild mit accent-color anpassen oder die Standarddarstellung mit appearance: none für das <input type="checkbox">-Element überschreiben.

Native Anpassung mit accent-color

Für ein einfaches, markenkonsistentes Styling, bei dem das native Rendering, das Tastaturverhalten, die Validierung und die Fokusindikatoren des Betriebssystems beibehalten werden, verwenden Sie accent-color.

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

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

Vollständig benutzerdefinierte Stile mit appearance: none

Verwenden Sie appearance: none, wenn das Design die Kontrolle über Form, Größe, Status oder Indikatoren des Kästchens erfordert. Dadurch wird das native visuelle Styling entfernt, während das <input>-Element als interaktives Ziel beibehalten wird.

Legen Sie explizite relative Größen für --checkbox-size und --checkbox-icon-size fest, da appearance: none die Standarddimensionen des Browsers entfernt. Das Symbol sollte kleiner als das Kästchen sein, damit Platz für den Rahmen und den visuellen Abstand bleibt.

/* 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;
  }
}

Der unbestimmte Status

Der unbestimmte Zustand kann nicht über ein HTML-Attribut festgelegt werden. Legen Sie die DOM-Eigenschaft indeterminate in JavaScript (checkbox.indeterminate = true) fest und achten Sie darauf, dass sich die Pseudoklasse :indeterminate visuell von den Zuständen :checked und „nicht ausgewählt“ unterscheidet:

• Nativ (accent-color): Der Browser formatiert das Element automatisch anhand seines accent-color (keine zusätzliche :indeterminate-CSS-Regel erforderlich).
• Benutzerdefiniert (appearance: none): Tauschen Sie --checkbox-icon gegen var(--icon-dash) auf .checkbox-custom:indeterminate aus, wie oben gezeigt.

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

Bedienungshilfen und Interaktion

• DO use :focus-visible rather than :focus to style focus indicators on custom checkboxes so a distinct outline appears for keyboard navigation without showing on pointer clicks.
• Verwenden Sie NICHT outline: none und blenden Sie keine Fokusindikatoren für Kästchen aus.

• DO ensure the checkbox or its wrapping <label> provides an interactive hit target of at least 44px x 44px while keeping the visual checkbox box sized in relative units:

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

• DO provide a :disabled style variant that lowers opacity and sets cursor: not-allowed to convey inactive states clearly.

Probleme, die bei der Verwendung von „accent-color“ auftreten können

Das Browser-Rendering von accent-color variiert. Für Indikatoren, die im Allgemeinen über einen Akzentfarbenhintergrund gezeichnet werden, z. B. Häkchen in Kästchen und Punkte in Optionsfeldern, können Browser unterschiedliche Behandlungen anwenden:

• Chromium und Firefox wählen in der Regel eine kontrastierende Farbe für die Anzeige aus.
• In Safari wird im hellen Modus möglicherweise ein weißer Indikator und im dunklen Modus ein schwarzer Indikator beibehalten, während die Akzentfarbe dahinter geändert wird. Diese Anpassung bietet nicht immer ausreichenden Kontrast für jede angegebene Farbe. Testen Sie daher wichtige Kombinationen in Safari, einschließlich heller und dunkler Farbschemas. Gehen Sie nicht davon aus, dass Safari automatisch die Farbe für die Anzeige auswählt, die den besten Kontrast bietet.

Fallback-Strategien

Fallbacks und Browserunterstützung für „accent-color“

Das Attribut accent-color ist eine progressive Verbesserung. Browser, die diese Eigenschaft nicht unterstützen, ignorieren sie und verwenden ihre Standard-UI-Farben.

CSS-Masken