CSS-Checkbox-Generator

Was ist dieses Tool?

Standard-Checkboxen des Browsers sehen in jedem Browser anders aus und lassen sich nicht direkt mit CSS umgestalten, da ihr Erscheinungsbild vom Betriebssystem gezeichnet wird, nicht von reinem CSS. Der übliche Workaround besteht darin, die native Checkbox visuell zu verstecken und stattdessen ein Geschwisterelement zu gestalten, gesteuert über den :checked-Zustand der Checkbox – das Input-Element bleibt voll funktions- und barrierefrei, nur sein Erscheinungsbild ändert sich.

Dieses Tool setzt dieses Muster für drei gängige Checkbox-Stile um: eine abgerundete Box mit animiertem Häkchen, einen iOS-artigen Schiebeschalter und einen gefüllten Kreis (radiobutton-artig). Klicke im Vorschaubereich auf die Checkbox, um den markierten Zustand zu sehen, passe Größe und Akzentfarbe an und kopiere das CSS.

Quelle: Selectors Level 4, W3C — die Spezifikation, die die :checked-Pseudoklasse definiert, auf der diese Technik beruht.

Warum sollte man es nutzen?

• Live, klickbare Vorschau – schalte die Checkbox um, um genau zu sehen, wie der markierte und der nicht markierte Zustand aussehen.
• Drei unterschiedliche, gängige Stile in einem Tool: Häkchen-Box, Schiebeschalter und gefüllter Kreis.
• Das zugrunde liegende Element bleibt ein echtes <input type="checkbox">, sodass Tastaturnavigation, Formularübermittlung und Screenreader wie gewohnt funktionieren.
• Anpassbare Größe und Akzentfarbe, direkt in die CSS-Werte generiert statt als auszufüllende Variablen belassen.
• Keine Icon-Font, SVG-Datei oder Bilddatei nötig – Häkchen und Knopf werden mit einfachen CSS-Rändern und Pseudo-Elementen gezeichnet.
• Kostenlos, läuft im Browser, keine Anmeldung nötig.

Anleitung

1. Wähle einen Stil: abgerundetes Häkchen, Schiebeschalter oder gefüllter Kreis.
2. Ziehe den Größenregler, um die Checkbox größer oder kleiner zu machen.
3. Wähle eine Akzentfarbe – sie wird zur Hintergrund- und Randfarbe des markierten Zustands.
4. Klicke im Vorschaubereich auf die Checkbox, um zu bestätigen, dass sowohl markierter als auch nicht markierter Zustand gut aussehen.
5. Kopiere das generierte CSS in dein Stylesheet und verwende es auf jedem <input type="checkbox">, das mit derselben Struktur wie im Vorschau-Markup umschlossen ist.

Beispiel

Eingabe

Stil: abgerundetes Häkchen · Größe: 24px · Farbe: Orange

Ausgabe

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

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

Das Checkbox-Input wird visuell versteckt; die sichtbare Box ist ein Geschwister-<span>, das über den :checked-Zustand des Inputs gestaltet wird, mit einem kleinen gedrehten Rand, der beim Markieren als Häkchen eingezeichnet wird.

Warum die native Checkbox verstecken statt entfernen

Es ist verlockend, auf das echte <input> zu verzichten und eine Checkbox nur aus einem gestalteten <div> mit Klick-Handler zu bauen, aber damit gehen Tastaturunterstützung, Formularübermittlung und Screenreader-Semantik verloren, die man sonst geschenkt bekommt. Das von diesem Tool erzeugte Muster behält das echte Checkbox-Input im Markup – nur visuell versteckt mit opacity: 0 und neu positioniert –, sodass der Browser es weiterhin in jeder wichtigen Hinsicht als echte Checkbox behandelt, während ein Geschwisterelement die sichtbare Gestaltung übernimmt.

Die drei Stile auf einen Blick

• Abgerundetes Häkchen: das vertraute Quadrat-mit-Häkchen-Muster, am häufigsten bei Formularfeldern, Zustimmungs-Checkboxen und Mehrfachauswahllisten.
• Schiebeschalter: wirkt eher wie eine sofortige Ein/Aus-Einstellung als ein Formularfeld – besser geeignet für Einstellungsbildschirme als für Checkbox-Listen.
• Gefüllter Kreis: ein minimalistisches, radiobutton-ähnliches Aussehen, nützlich, wenn eine eckige Box neben abgerundeten UI-Elementen zu wuchtig wirken würde.

An den Rest deiner Oberfläche anpassen

Die generierte Akzentfarbe wirkt sich nur auf den markierten Zustand aus – wähle die Farbe deiner Marke oder deiner Buttons, damit die Checkbox konsistent mit dem Rest der Seite wirkt. Kombiniere sie mit demselben border-radius, der auch anderswo in der Oberfläche verwendet wird, für ein stimmigeres Erscheinungsbild.

→ Border-Radius-Generator · Farbauswahl

Häufig gestellte Fragen