CSS-checkboxgenerator

Wat de gegenereerde CSS doet

De regel wordt direct op het invoerveld toegepast met appearance: none, waardoor de standaardweergave verdwijnt zodat de box gestijld kan worden:

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

Wanneer de checkbox is aangevinkt, vult de box zich met de gekozen kleur en verschijnt een wit vinkje dat met CSS is getekend:

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

Waarom een native invoerveld

De stijl vervangt het element nooit door een div: het echte <input type="checkbox"> behoudt de toetsenbordbediening, de ondersteuning voor schermlezers en de formulierverzending. appearance: none verandert alleen het uiterlijk. Als je oudere Safari-versies moet ondersteunen, voeg dan -webkit-appearance: none toe aan de regel.

Focus en hover

De gegenereerde regel bevat een vloeiende kleurovergang, maar geen hover- of focusstijlen. Voeg je eigen regels toe voor :hover en :focus-visible, zodat toetsenbordgebruikers altijd zien waar de focus ligt, bijvoorbeeld een gekleurde omlijning rond de box.

Het vinkje

Het vinkje is een kleine witte lijn die 45 graden is gedraaid. Heb je een andere kleur of een dunner of dikker lijntje nodig, pas dan de waarden border en border-width in de ::after-regel aan.