Hier is een basisvoorbeeld over hoe je aangepaste selectievakjes kunt maken met CSS:
Allereerst, verberg het standaard selectievakje met de volgende CSS:
```
input[type=“checkbox”] {
display: none;
}
```
Vervolgens, voeg een nieuwe stijl toe voor het selectievakje label:
```
input[type=“checkbox”] + label {
padding-left: 28px;
height: 24px;
display: inline-block;
line-height: 24px;
background: url(‘checkbox_unchecked.png’) left top no-repeat;
cursor: pointer;
}
```
Hierbij wordt verondersteld dat je een afbeelding genaamd ‘checkbox\_unchecked.png’ hebt, die zal worden weergegeven in plaats van het standaard selectievakje.
Daarna, als het selectievakje is gecontroleerd, willen we dat het uiterlijk verandert om dit te weerspiegelen. Daarom voegen we de volgende CSS toe:
```
input[type=“checkbox”]:checked + label {
background: url(‘checkbox_checked.png’) left top no-repeat;
}
```
Hierbij wordt verondersteld dat je een afbeelding genaamd ‘checkbox\_checked.png’ hebt, die zal worden weergegeven wanneer het selectievakje is gecontroleerd.
Vergeet niet je HTML-code correct in te stellen:
```
```
Je kunt dan deze stijlen en afbeeldingen wijzigen om het gevonden selectievakje in overeenstemming te brengen met de stijl van de rest van uw site.
Opmerking: De voorbeeldafbeeldingen checkbox_unchecked.png en checkbox_checked.png worden verondersteld om 24×24 pixels te zijn, wat overeenkomt met de hoogte van het label, maar dit kan worden aangepast zoals vereist.
Let ook op dat uw checkbox ‘id’ overeenkomt met de ‘for’-attribuut van de label, op deze manier zal de interactie soepel werken zelfs na het verbergen van de standaard checkbox.
