Stile delle caselle di controllo

Funzionalità web: accent-color :indeterminate Proprietà di trasformazione individuali Maschere

Utilizza un codice HTML semantico e accessibile con ogni casella di controllo associata alla relativa etichetta, nidificando <input> all'interno di <label> o facendo corrispondere l'attributo for dell'etichetta all'attributo id dell'input.

Il CSS moderno offre due approcci per applicare stili alle caselle di controllo: personalizzare l'aspetto nativo con accent-color o eseguire l'override della presentazione predefinita con appearance: none sull'elemento <input type="checkbox">.

Personalizzazione nativa con accent-color

Per uno stile semplice e coerente con il brand che mantenga il rendering nativo, il comportamento della tastiera, la convalida e gli indicatori di stato attivo del sistema operativo, utilizza accent-color.

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

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

Stile completamente personalizzato con appearance: none

Utilizza appearance: none quando il design richiede il controllo su forma, dimensioni, stati o indicatori della casella di controllo. In questo modo, lo stile visivo nativo viene rimosso, mentre l'elemento <input> rimane il target interattivo.

Imposta dimensioni relative esplicite per --checkbox-size e --checkbox-icon-size perché appearance: none rimuove le dimensioni predefinite del browser. Mantieni l'icona più piccola della casella di controllo per lasciare spazio al bordo e alla spaziatura interna visiva.

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

Stato indeterminato

Lo stato indeterminato non può essere impostato tramite un attributo HTML; imposta la proprietà DOM indeterminate in JavaScript (checkbox.indeterminate = true) e assicurati che la pseudoclasse :indeterminate sia visivamente distinta dagli stati :checked e non selezionato:

  • Nativo (accent-color): lo stile viene applicato automaticamente dal browser utilizzando l'elemento accent-color (non è necessaria una regola CSS :indeterminate aggiuntiva).
  • Personalizzato (appearance: none): scambia --checkbox-icon con var(--icon-dash) su .checkbox-custom:indeterminate come mostrato sopra.
const selectAll = document.querySelector("#select-all");
selectAll.indeterminate = true;

Accessibilità e interazione

  • USA :focus-visible anziché :focus per applicare lo stile agli indicatori di stato attivo sulle caselle di controllo personalizzate, in modo che venga visualizzato un contorno distinto per la navigazione da tastiera senza che venga mostrato sui clic del puntatore.
  • NON utilizzare outline: none o nascondere gli indicatori di stato attivo sulle caselle di controllo.

  • SÌ: assicurati che la casella di controllo o il relativo wrapper <label> fornisca un target di hit interattivo di almeno 44px x 44px, mantenendo le dimensioni della casella di controllo visiva in unità relative:

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

  • SÌ: fornisci una variante di stile :disabled che riduce l'opacità e imposta cursor: not-allowed per comunicare chiaramente gli stati non attivi.

Problemi da tenere presenti quando si utilizza accent-color

Il rendering del browser di accent-color varia. Per gli indicatori generalmente dipinti su uno sfondo di colore intenso, come i segni di spunta delle caselle di controllo e i punti dei pulsanti di opzione, i browser possono applicare trattamenti diversi:

  • Chromium e Firefox in genere selezionano un colore dell'indicatore a contrasto.
  • Safari potrebbe invece mantenere un indicatore bianco in modalità Luce o un indicatore nero in modalità Buio, modificando il colore intenso dietro di esso. Questa regolazione non fornisce sempre un contrasto sufficiente per ogni colore fornito, quindi testa le combinazioni importanti in Safari, incluse le combinazioni di colori chiari e scuri. Non dare per scontato che Safari scelga automaticamente il colore dell'indicatore che offre il contrasto migliore.

Strategie di riserva

Alternative e supporto dei browser per accent-color

La proprietà accent-color è un potenziamento progressivo. I browser che non supportano questa proprietà la ignoreranno e utilizzeranno i colori predefiniti della UI.

Maschere CSS