Selectievakjes opmaken

Webfuncties: accent-color :indeterminate Afzonderlijke transformatie-eigenschappen Maskers

Gebruik semantische, toegankelijke HTML waarbij elk selectievakje is gekoppeld aan het bijbehorende label. Dit doe je door de <input> te nesten in de <label> of door het kenmerk for van het label te koppelen aan de id van de invoer.

Moderne CSS biedt 2 manieren om selectievakjes op te maken: pas de systeemeigen weergave aan met accent-color of overschrijf de standaardpresentatie met appearance: none voor het element <input type="checkbox">.

Native aanpassing met accent-color

Gebruik accent-color voor eenvoudige, merkconsistente opmaak die de native weergave, het toetsenbordgedrag, de validatie en de focusindicatoren van het besturingssysteem behoudt.

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

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

Volledig aangepaste stijl met appearance: none

Gebruik appearance: none als je voor het ontwerp de vorm, grootte, statussen of indicatoren van het selectievakje wilt kunnen bepalen. Hiermee wordt de native visuele stijl verwijderd, terwijl de <input> het interactieve doel blijft.

Stel expliciete relatieve grootten in voor --checkbox-size en --checkbox-icon-size, omdat appearance: none de standaarddimensies van de browser verwijdert. Houd het icoon kleiner dan het selectievakje om ruimte te bieden voor de rand en visuele opvulling.

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

De onbepaalde status

De onbepaalde status kan niet worden ingesteld via een HTML-kenmerk. Stel de DOM-eigenschap indeterminate in JavaScript (checkbox.indeterminate = true) in en zorg dat de pseudoklasse :indeterminate visueel verschilt van zowel de status :checked als de status Uitgevinkt:

  • Systeemeigen (accent-color): De browser past automatisch de stijl toe met de accent-color van het element (er is geen extra :indeterminate CSS-regel nodig).
  • Aangepast (appearance: none): Wissel --checkbox-icon om naar var(--icon-dash) op .checkbox-custom:indeterminate, zoals hierboven getoond.
const selectAll = document.querySelector("#select-all");
selectAll.indeterminate = true;

Toegankelijkheid en interactie

  • Gebruik WEL :focus-visible in plaats van :focus om focusindicatoren op aangepaste selectievakjes op te maken, zodat er een duidelijke contour verschijnt voor toetsenbordnavigatie zonder dat deze wordt getoond bij muisklikken.
  • Gebruik outline: none NIET en verberg geen focusindicatoren op selectievakjes.

  • Zorg dat het selectievakje of de wrapper <label> een interactief hitdoel van minimaal 44px x 44px biedt, terwijl het visuele selectievakje de grootte in relatieve eenheden behoudt:

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

  • WEL een :disabled-stijlvariant bieden die de dekking verlaagt en cursor: not-allowed instelt om inactieve statussen duidelijk over te brengen.

Problemen om rekening mee te houden bij het gebruik van accent-color

De browserweergave van accent-color varieert. Voor indicatoren die meestal over een achtergrond met accentkleur worden geschilderd, zoals selectievakjes en keuzerondjes, kunnen browsers verschillende behandelingen toepassen:

  • Chromium en Firefox selecteren meestal een contrasterende indicatorkleur.
  • Safari kan in plaats daarvan een witte indicator behouden in de lichte modus of een zwarte indicator in de donkere modus, terwijl de accentkleur erachter wordt aangepast. Deze aanpassing biedt niet altijd voldoende contrast voor elke geleverde kleur. Test daarom belangrijke combinaties in Safari, waaronder zowel lichte als donkere kleurenschema's. Ga er niet van uit dat Safari automatisch de indicatorkleur kiest die het beste contrast biedt.

Reservestrategieën

Fallbacks en browserondersteuning voor accent-color

De property accent-color is progressive enhancement. Browsers die deze property niet ondersteunen, negeren deze en gebruiken de standaard UI-kleuren.

CSS-maskers