Aufgabenpfad / von der Eingabe zum Ergebnis
So gestaltest du eine eigene CSS-Checkbox
- 01
Lege die Größe des Steuerelements fest
Diese Anleitung gilt für die Basisvorlage; Galerievorlagen besitzen eigene Formen, Farben, HTML-Strukturen und Zeitabläufe: Das Häkchen skaliert aus dem Platz innerhalb des Rahmens, nicht aus der Außengröße. Vorschau und Export verwenden dieselbe CSS-Rahmenform. Klicke auf die Vorschau oder fokussiere sie und drücke die Leertaste, um ihren nativen aktivierten Zustand umzuschalten. 24 Vorlagen · Ausgewählt · Farbe
- 02
Forme den Rahmen
Verwende ein Steuerelement von 18–64 px und einen Rahmen von 1–8 px. Innerhalb des Rahmens müssen mindestens 8 px für das Häkchen übrig bleiben. Ungültige Kombinationen leeren die Vorschau und deaktivieren den Export.
- 03
Wähle die Farben der Zustände
Diese Anleitung gilt für die Basisvorlage; Galerievorlagen besitzen eigene Formen, Farben, HTML-Strukturen und Zeitabläufe: Wähle Rahmenfarbe für den Ruhezustand und Farbe bei Auswahl für den gefüllten Zustand. Halte die Farbe bei Auswahl dunkel genug für Kontrast zum weißen Häkchen, hinter dem sie liegt, denn das Häkchen ist immer weiß.
- 04
Sieh dir beide Zustände in der Vorschau an
Diese Anleitung gilt für die Basisvorlage; Galerievorlagen besitzen eigene Formen, Farben, HTML-Strukturen und Zeitabläufe: Schalte Ausgewählten Zustand anzeigen um, um die Ruhe- und die gefüllte Seite in der Live-Vorschau zu vergleichen. Das Häkchen blendet über 160 ms mit einem kleinen Hochskalieren ein — genau die Bewegung, die das exportierte CSS zwischen den Zuständen reproduziert.
- 05
Kopiere oder lade das CSS herunter
Drücke CSS kopieren oder .css herunterladen, um toolars-checkbox.css zu speichern. Das Regelset behält darunter ein echtes input-Element — appearance: none zeichnet es nur neu —, und die Zustände :focus-visible und :disabled sind im Export enthalten.
- 06
Halte das Markup nativ
Weise die Klasse .checkbox direkt einem echten input-Element zu und kombiniere es mit einem label wie bei jeder Checkbox. Tastaturfokus, Klickverhalten und die Ansagen assistiver Technologien funktionieren weiter, weil nichts Semantisches ersetzt wird. Der weiße Ruhehintergrund ist Teil der Regel, sodass der leere Zustand auch auf getönten Flächen lesbar bleibt. HTML enthält das aktuelle CSS und ein funktionierendes Beispiel. Native Steuerelemente unterstützen Tastatureingaben.