Creare una casella di controllo personalizzata in CSS può essere un po’ complicato perché l’elemento HTML `` è difficile da stilizzare in modo regolare a causa delle restrizioni del browser. Tuttavia, esiste un approccio comune che utilizza i pseudo-elementi CSS ::before e ::after per creare una casella di controllo personalizzata.
Ecco un esempio di come potrebbe funzionare:
HTML:
```
```
CSS:
```
/* Nascondi la casella di controllo originale */
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Crea una nuova casella da zero */
.checkbox-container .checkmark {
position: relative;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* Quando la casella di controllo è controllata, cambia il background */
.checkbox-container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Crea l’indicatore (il segno di spunta) quando la casella è controllata */
.checkbox-container .checkmark:after {
content: “”;
position: absolute;
display: none;
}
.checkbox-container input:checked ~ .checkmark:after {
display: block;
}
/* Stile del segno di spunta */
.checkbox-container .checkmark:after {
left: 10px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
```
In questo esempio viene prima nascosta la casella di controllo HTML di base. Poi viene creato un nuovo elemento (la “checkmark”) che appare come una casella. Quando l’utente seleziona la casella di controllo, viene mostrato l’indicatore di spunta (l’elemento “.checkmark:after”).
