Personalizzare le caselle di controllo nei CSS è un po’ più complicato rispetto agli altri input HTML a causa delle limitazioni della personalizzazione dei controlli di forma forniti dal browser. Tuttavia, esistono vari approcci per farlo. Ecco un esempio basilare:
1. Nascondere la casella di controllo originale:
```
input[type=“checkbox”] {
display: none;
}
```
1. Creare una nuova casella di controllo personalizzata:
```
input[type=“checkbox”] + label {
position: relative;
padding-left: 35px;
cursor: pointer;
}
input[type=“checkbox”] + label:before {
content: ‘’;
position: absolute;
width: 25px;
height: 25px;
left: 0;
background-color: #ccc;
border: 1px solid #000;
}
```
1. Modificare l’aspetto della casella di controllo quando è selezionata:
```
input[type=“checkbox”]:checked + label:before {
background-color: #000;
}
```
In questo esempio, quando l’utente seleziona la casella di controllo, il colore di sfondo della casella di controllo personalizzata diventa nero.
È importante notare che il selettore `+` in CSS seleziona l’elemento che viene immediatamente dopo (fratello successivo) l’elemento specificato. Quindi `input[type=“checkbox”] + label` seleziona la label che viene immediatamente dopo ogni input di tipo checkbox.
Questo è solo un esempio di base e potrebbe non funzionare su tutti i browser. Ci sono molte altre tecniche che si possono utilizzare per personalizzare le caselle di controllo con CSS e possono variare in complessità a seconda del design desiderato.
