CSS: attribuire un colore di sfondo personalizzato ad un checkbox selezionato

Il linguaggio CSS non prevede la possibilità di modificare il colore di sfondo di un checkbox alla sua selezione; il browser assegna quindi un colore predefinito.

Per ovviare a questo inconveniente, è necessario sovrapporre al checkbox un elemento delle stesse dimensioni, a cui attribuire il colore di sfondo desiderato. Se si assegna l’attributo id="personalizzato" al checkbox in questione, il codice CSS da utilizzare per attribuire il colore di sfondo #a12000 è il seguente:

input[type="checkbox"] {
	width: 20px;
	height: 20px;
}

#personalizzato:checked::after {
  content: "\2714"; /* simbolo di "spunta" */
  color: white;
  line-height: 20px;
  width: 20px;
  height: 20px;
  font-size: 16px;
  text-align: center;  
  background-color: #a12000;
  display: inline-block;  
  font-weight: bold;
}

Di seguito un esempio completo:

See the Pen checkbox con colore di sfondo personalizzato by Alberto De Franceschi (@albertodf) on CodePen.