CSS Checkbox Generator

Wat is deze tool?

Standaard browsercheckboxes zien er in elke browser anders uit en zijn lastig direct te herstijlen, omdat hun ingebouwde uiterlijk door het besturingssysteem wordt getekend in plaats van door platte CSS. De standaardoplossing is om de native checkbox visueel te verbergen en in plaats daarvan een zuselement te stijlen, aangestuurd door de :checked-status van de checkbox — de input blijft volledig functioneel en toegankelijk, alleen het uiterlijk verandert.

Deze tool bouwt dat patroon voor drie veelgebruikte checkboxstijlen: een afgeronde box met een geanimeerd vinkje, een iOS-achtige schuivende toggle-switch, en een gevulde cirkel (radiobutton-achtige) stijl. Klik in het voorbeeld op de checkbox om de aangevinkte status te zien, pas grootte en accentkleur aan en kopieer daarna de CSS.

Bron: Selectors Level 4, W3C — de specificatie die de :checked-pseudoklasse definieert waar deze techniek op steunt.

Waarom gebruiken?

• Live, klikbaar voorbeeld — vink de checkbox aan om precies te zien hoe de aangevinkte en niet-aangevinkte status eruitzien.
• Drie verschillende, veelgebruikte stijlen in één tool: vinkjebox, toggle-switch en gevulde cirkel.
• Het onderliggende element blijft een echte <input type="checkbox">, dus toetsenbordnavigatie, formulierverzending en schermlezers blijven normaal werken.
• Instelbare grootte en accentkleur, direct verwerkt in de CSS-waarden in plaats van als in te vullen variabelen achtergelaten.
• Geen icoonlettertype, SVG-bestand of afbeelding nodig — het vinkje en de knop worden getekend met platte CSS-randen en pseudo-elementen.
• Gratis, draait in je browser, geen aanmelding.

Hoe te gebruiken

1. Kies een stijl: afgerond vinkje, toggle-switch of gevulde cirkel.
2. Sleep de grootteschuif om de checkbox groter of kleiner te maken.
3. Kies een accentkleur — dit wordt de achtergrond- en randkleur bij aangevinkte status.
4. Klik in het voorbeeldpaneel op de checkbox om te bevestigen dat zowel de aangevinkte als niet-aangevinkte status er goed uitzien.
5. Kopieer de gegenereerde CSS naar je stylesheet en gebruik hem op elke <input type="checkbox"> die op dezelfde manier is verpakt als de voorbeeldmarkup.

Voorbeeld

Invoer

Stijl: afgerond vinkje · Grootte: 24px · Kleur: oranje

Uitvoer

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

De checkbox-input is visueel verborgen; de zichtbare box is een zuster-<span> gestileerd met de :checked-status van de input, met een kleine gedraaide rand die als vinkje wordt getekend zodra hij is aangevinkt.

Waarom de native checkbox verbergen in plaats van verwijderen

Het is verleidelijk om de echte <input> over te slaan en een checkbox puur op te bouwen uit een gestileerde <div> met een klikhandler, maar dan verlies je gratis toetsenbordondersteuning, formulierverzending en schermlezer-semantiek. Het patroon dat deze tool genereert houdt de echte checkbox-input in de markup — alleen visueel verborgen met opacity: 0 en herpositioneerd — zodat de browser deze nog steeds in elk opzicht als een echte checkbox behandelt, terwijl een zuselement de zichtbare styling verzorgt.

De drie stijlen in het kort

• Afgerond vinkje: een herkenbaar vierkant-met-vinkje-patroon, het meest gangbaar voor formuliervelden, akkoordvakjes en multi-selectlijsten.
• Toggle-switch: leest als een directe aan/uit-instelling in plaats van een formulierveld — het best voor voorkeuren en instellingenschermen in plaats van checkboxlijsten.
• Gevulde cirkel: een minimalistische, radiobutton-achtige uitstraling, nuttig wanneer een vierkante box visueel zwaar zou aanvoelen naast afgeronde UI-elementen in de buurt.

Afstemmen op de rest van je UI

De gegenereerde accentkleur beïnvloedt alleen de aangevinkte status — kies wat je merk- of knopkleur ook is zodat de checkbox consistent aanvoelt met de rest van de pagina. Combineer dit met dezelfde border-radius die elders in de interface wordt gebruikt voor een samenhangender geheel.

→ Border Radius Generator · Kleurkiezer

Veelgestelde vragen