Checkbox- und Radio-Generator
Eigene Checkboxen und Radio-Buttons ohne Bilder gestalten: Größe, Rahmen, Häkchen und Farben einstellen, CSS kopieren.
Der Checkbox- und Radio-Generator gestaltet Formular-Auswahlfelder ohne Bilder und ohne zusätzliche Elemente. Größe, Rahmen, Radius, Akzentfarbe und das Häkchen sind einstellbar, Radio-Buttons erhalten einen Punkt. Die Felder bleiben echte Formularelemente mit Tastaturbedienung, Fokusrahmen und korrekter Ansage im Screenreader.
<fieldset>
<legend>Benachrichtigungen</legend>
<label class="choice"><input type="checkbox" name="news" checked> Newsletter</label>
<label class="choice"><input type="checkbox" name="sms"> SMS</label>
</fieldset>
<fieldset>
<legend>Versand</legend>
<label class="choice"><input type="radio" name="versand" checked> Standard</label>
<label class="choice"><input type="radio" name="versand"> Express</label>
</fieldset>Checkboxen und Radio-Buttons gestalten
Native Formularfelder sehen je nach Browser und System unterschiedlich aus. Mit appearance: none setzt du sie auf ein leeres Kästchen zurück und gestaltest es
wie jedes andere Element. Das Häkchen ist ein Pseudo-Element, der Zustand kommt aus :checked.
| Selektor | Wirkung |
|---|---|
input:checked | Akzentfarbe für Rahmen und Fläche |
input:checked::before | Häkchen oder Punkt einblenden |
input:focus-visible | Fokusrahmen bei Tastaturbedienung |
input:disabled | Gedimmt und nicht klickbar |
Für Ein/Aus-Einstellungen eignet sich ein Schalter aus dem Toggle-Switch-Generator, für Textfelder der Input-Feld-Generator.
Häufige Fragen
Reicht nicht einfach accent-color?
accent-color färbt native Checkboxen mit einer Zeile ein und ist ideal, wenn nur die Farbe passen soll. Für eigene Größe, Rahmen, Radius oder ein anderes Häkchen brauchst du appearance: none und ein Pseudo-Element wie in diesem Generator.
Wie entsteht das Häkchen ohne Bild?
Das ::before-Element wird per clip-path in Form eines Häkchens oder Kreuzes zugeschnitten und mit der Häkchenfarbe gefüllt. Bei :checked wächst es per transform: scale() von 0 auf 1.
Bleiben die Felder barrierefrei?
Ja. Es sind weiterhin input-Elemente vom Typ checkbox und radio. Wichtig ist ein verbundenes Label, wie im Beispiel durch das umschließende label-Element, und ein sichtbarer Fokusrahmen.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.