Mettre en forme des cases à cocher

Utilisez du code HTML sémantique et accessible, chaque case à cocher étant associée à son libellé, soit en imbriquant <input> dans <label>, soit en faisant correspondre l'attribut for du libellé à l'attribut id de l'entrée.

Le CSS moderne propose deux approches pour styliser les cases à cocher : personnaliser l'apparence native avec accent-color ou remplacer la présentation par défaut avec appearance: none sur l'élément <input type="checkbox">.

Personnalisation native avec accent-color

Pour un style simple et cohérent avec la marque qui conserve l'affichage natif, le comportement du clavier, la validation et les indicateurs de sélection du système d'exploitation, utilisez accent-color.

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

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

Style entièrement personnalisé avec appearance: none

Utilisez appearance: none lorsque la conception nécessite de contrôler la forme, la taille, les états ou les indicateurs de la case à cocher. Cela supprime le style visuel natif tout en laissant <input> comme cible interactive.

Définissez des tailles relatives explicites pour --checkbox-size et --checkbox-icon-size, car appearance: none supprime les dimensions par défaut du navigateur. L'icône doit être plus petite que la case à cocher pour laisser de l'espace pour sa bordure et son espacement visuel.

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

L'état indéterminé

L'état indéterminé ne peut pas être défini via un attribut HTML. Définissez la propriété DOM indeterminate en JavaScript (checkbox.indeterminate = true) et assurez-vous que la pseudo-classe :indeterminate est visuellement distincte des états :checked et non cochés :

• Natif (accent-color) : stylisé automatiquement par le navigateur à l'aide de l'élément accent-color (aucune règle CSS :indeterminate supplémentaire n'est nécessaire).
• Personnalisé (appearance: none) : remplacez --checkbox-icon par var(--icon-dash) sur .checkbox-custom:indeterminate, comme indiqué ci-dessus.

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

Accessibilité et interaction

• À FAIRE : Utilisez :focus-visible plutôt que :focus pour styliser les indicateurs de sélection sur les cases à cocher personnalisées afin qu'un contour distinct apparaisse pour la navigation au clavier sans s'afficher lors des clics du pointeur.
• N'UTILISEZ PAS outline: none et ne masquez pas les indicateurs de sélection sur les cases à cocher.

• À FAIRE : Assurez-vous que la case à cocher ou son élément <label> d'encapsulation fournit une cible d'interaction d'au moins 44px x 44px, tout en conservant la taille de la case à cocher visuelle en unités relatives :

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

• À FAIRE : Fournissez une variante de style :disabled qui réduit l'opacité et définit cursor: not-allowed pour indiquer clairement les états inactifs.

Problèmes à prendre en compte lors de l'utilisation d'accent-color

Le rendu de accent-color dans le navigateur varie. Pour les indicateurs généralement peints sur un arrière-plan de couleur d'accentuation, tels que les coches de case et les points de case d'option, les navigateurs peuvent appliquer différents traitements :

• Chromium et Firefox sélectionnent généralement une couleur d'indicateur contrastée.
• Safari peut conserver un indicateur blanc en mode clair ou un indicateur noir en mode sombre, tout en modifiant la couleur d'accentuation derrière lui. Cet ajustement ne fournit pas toujours un contraste suffisant pour chaque couleur fournie. Testez donc les combinaisons importantes dans Safari, y compris les jeux de couleurs clairs et sombres. Ne partez pas du principe que Safari choisira automatiquement la couleur d'indicateur offrant le meilleur contraste.

Stratégies de remplacement

Solutions de remplacement et compatibilité des navigateurs pour accent-color

La propriété accent-color est une amélioration progressive. Les navigateurs qui ne sont pas compatibles avec cette propriété l'ignoreront et utiliseront les couleurs par défaut de leur UI.

Masques CSS