Hoe checkboxen stylen met CSS zonder gebruik van…

Om een selectievakje te stylen zonder bibliotheken, kun je een combinatie gebruiken van het verbergen van het standaardelement en het stylen van de pseudo-elementen ::before of ::after die gekoppeld zijn aan het <label>-ouder.

Verberg het standaard selectievakje:

input[type="checkbox"] {
  display: none; /* of visibility: hidden; height: 0; width: 0; */
}

Maak een gestileerd "vierkant" met behulp van het pseudo-element <label>:

input[type="checkbox"] + label::before {
  content: ''; /* Vereist om het pseudo-element weer te geven */
  display: inline-block;
  width: 1em; /* Grootte van het vierkant */
  height: 1em; /* Grootte van het vierkant */
  border: 1px solid #ccc; /* Rand van het vierkant */
  margin-right: 0.5em; /* Ruimte tussen vierkant en tekst */
  vertical-align: middle; /* Verticale uitlijning */
  /* Andere optionele stijlen: background-color, border-radius, box-shadow */
}

Stijl voor de aangevinkte staat:

Gebruik de checked-selector voor input en wijzig de stijlen van het pseudo-element label dienovereenkomstig.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Achtergrondkleur wanneer aangevinkt */
  border-color: #007bff; /* Randkleur wanneer aangevinkt */
  /* Andere optionele stijlen */
}

Voeg een "vinkje" (of een andere indicator) toe:

Je kunt een tweede pseudo-element (::after) gebruiken of het bestaande ::before stylen met background-image (svg, data-url) of randstijlen.

Voorbeeld met border om een vinkje te maken:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Breedte van de vinklijn */
  height: 0.7em; /* Hoogte van de vinklijn */
  border-right: 2px solid white; /* Recht deel van de vink */
  border-bottom: 2px solid white; /* Onderdeel van de vink */
  transform: rotate(45deg); /* Rotatie om de vink te vormen */
  position: absolute; /* Voor positionering binnen ::before */
  top: 0.1em; /* Positie-aanpassing */
  left: 0.3em; /* Positie-aanpassing */
  /* Het parent label::before kan position: relative; nodig hebben */
}

Voeg position: relative; toe aan input[type="checkbox"] + label::before voor de laatste voorbeeld:

input[type="checkbox"] + label::before {
  /* ... vorige stijlen ... */
  position: relative; /* Toegevoegd voor ::after positionering */
}

Deze aanpak biedt volledige controle over het uiterlijk van het selectievakje en goede toegankelijkheid, omdat het standaardelement nog steeds bestaat en reageert op gebruikersacties (klik, focus). Het is belangrijk om input en label te koppelen via de attributen id en for voor correcte werking bij het klikken op de labeltekst.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Akkoord gaan met de voorwaarden</label>

Hoe checkboxen stylen met CSS zonder gebruik van bibliotheken?