Hier is een basis gids om aangepaste keuzerondjes (radio buttons) te maken met behulp van CSS:
Eerst moet je een standaard HTML keuzerondje maken. Dat zou er zo uitzien:
```
```
Opmerking: Je kan de “checked” attribuut veranderen om te bepalen welke keuzerondje standaard geselecteerd is.
Hierna start je met de CSS. Eerst moet je de standaard keuzerondjes verbergen.
```
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
```
Vervolgens maak je jouw personaliseerde keuzerondje. Dit voorbeeld maakt de keuzerondje als een cirkel.
```
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
```
Nu voeg je een verandering toe om te laten zien dat de keuzerondje geselecteerd is.
```
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
```
Tenslotte, je wilt iets laten zien in de cirkel als het geselecteerd is. Dit is gewoonlijk een kleinere cirkel binnenin.
```
.container input:checked ~ .checkmark:after {
content: “”;
position: absolute;
display: block;
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
```
Dat is alles! Je hebt nu een aangepast keuzerondje. Het kan zijn dat je de waarden moet aanpassen om het naar jouw smaak te maken, maar dit is de basis van hoe je het doet.
