Come stilizzare le caselle di controllo con CSS senza…

Per stilizzare una casella di controllo senza librerie, puoi usare una combinazione di nascondere l'elemento standard e stilizzare i pseudo-elementi ::before o ::after associati all'etichetta <label> genitore.

Nascondere la casella di controllo standard:

input[type="checkbox"] {
  display: none; /* o visibility: hidden; height: 0; width: 0; */
}

Creare un "quadrato" stilizzato usando il pseudo-elemento <label>:

input[type="checkbox"] + label::before {
  content: ''; /* Necessario per mostrare il pseudo-elemento */
  display: inline-block;
  width: 1em; /* Dimensione del quadrato */
  height: 1em; /* Dimensione del quadrato */
  border: 1px solid #ccc; /* Bordo del quadrato */
  margin-right: 0.5em; /* Spazio tra il quadrato e il testo */
  vertical-align: middle; /* Allineamento verticale */
  /* Altri stili opzionali: background-color, border-radius, box-shadow */
}

Stile per lo stato selezionato:

Utilizziamo il selettore checked per input e cambiamo gli stili del pseudo-elemento label di conseguenza.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Colore di sfondo quando selezionato */
  border-color: #007bff; /* Colore del bordo quando selezionato */
  /* Altri stili opzionali */
}

Aggiunta di una "spunta" (o altro indicatore):

È possibile usare un secondo pseudo-elemento (::after) o stilizzare quello esistente ::before usando background-image (svg, data-url) o stili di bordo.

Esempio con border per creare una spunta:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Larghezza della linea della spunta */
  height: 0.7em; /* Altezza della linea della spunta */
  border-right: 2px solid white; /* Parte destra della spunta */
  border-bottom: 2px solid white; /* Parte inferiore della spunta */
  transform: rotate(45deg); /* Rotazione per formare la spunta */
  position: absolute; /* Per posizionamento all'interno di ::before */
  top: 0.1em; /* Regolazione della posizione */
  left: 0.3em; /* Regolazione della posizione */
  /* La posizione relativa potrebbe essere necessaria su label::before */
}

Per far funzionare correttamente l'ultimo esempio, aggiungi position: relative; a input[type="checkbox"] + label::before:

input[type="checkbox"] + label::before {
  /* ... stili precedenti ... */
  position: relative; /* Aggiunto per posizionare ::after */
}

Questo approccio garantisce un controllo completo sull'aspetto della casella di controllo e una buona accessibilità, poiché l'elemento standard esiste ancora e risponde alle azioni dell'utente (clic, focus). È importante collegare input e label usando gli attributi id e for per un funzionamento corretto al clic sul testo dell'etichetta.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Accetto i termini</label>

Come stilizzare le caselle di controllo con CSS senza usare librerie?