Het stileren van selectievakjes in CSS kan lastig zijn, omdat de standaard selectievakjes van de browser niet volledig kunnen worden gestyled met CSS. Er zijn echter verschillende technieken die u kunt gebruiken om dit te bereiken, hier is één van die methoden:
1. Verberg het standaard selectievakje:
Dit kun je bereiken met de CSS-eigenschap `visibility: hidden;` of `display: none;`.```
input[type=“checkbox”] {
display: none;
}
```
1. Creëer een aangepast selectievakje
Je kunt een aangepast selectievakje maken met behulp van CSS. Dit doe je door gebruik te maken van de `:before` of `:after` pseudo-elementen.```
.checkbox:before {
content: “”;
display: inline-block;
width: 20px;
height: 20px;
background-color: #fff;
border: 2px solid #000;
}
```
1. Verandering bij selectie
Daarna zorg je met CSS dat wanneer het verborgen selectievakje is aangevinkt, het vormgegeven selectievakje verandert om aan te geven dat het is geselecteerd.```
input[type=“checkbox”]:checked + .checkbox:before {
background-color: #000;
}
```
Hier wordt ervan uitgegaan dat de HTML er zo uitziet:
```
```
Dit is een basisvoorbeeld. Je kunt de stijlen zo complex maken als je wilt, bijvoorbeeld door overgangen toe te voegen of het selectievakje bij focus te stileren.
Let op: Dit is zelfs al een versimpelde methode, een echt toegankelijke en foolproof manier van het stylen van selectievakjes houdt veel meer in dan dit en is flink complex.
