CSS-Toggle-Switch-Generator

So funktioniert es

Geben Sie links den Text ein, der neben dem Schalter stehen soll, zum Beispiel "Benachrichtigungen aktivieren". Rechts entstehen ein <style>-Block und ein <label>-Block; fügen Sie beide in Ihre Seite ein, und Sie haben einen funktionierenden Ein/Aus-Schalter ohne JavaScript. Darunter liegt eine echte Checkbox: unsichtbar, aber fokussierbar. Sie erreichen sie mit der Tabulatortaste, schalten sie mit der Leertaste um, ein Screenreader liest "ein/aus" vor, und beim Absenden des Formulars wird der Wert übertragen. Bei 52 Pixel Breite ist der Schalter 30 Pixel hoch, der weiße Knopf wandert eingeschaltet 22 Pixel nach rechts; die Ergebniszeile nennt diese Maße. Tragen Sie Ihre Markenfarbe als HEX-Code ein. Der Stil "Eigene Checkbox" macht aus derselben Struktur ein Quadrat mit Häkchen; bei einer hellen Farbe wird das Häkchen dunkel gezeichnet, damit es sichtbar bleibt. Herunterladen speichert eine PNG-Vorschau beider Zustände.

Dieses Werkzeug ist auch als css toggle switch generator, toggle switch css, css schalter, checkbox css gestalten, eigene checkbox css, Kippschalter CSS bekannt.

Was ist Toggle Switch?

Ein Toggle Switch ist der Schiebeschalter für Ein und Aus, wie man ihn aus den Einstellungen am Handy kennt. HTML hat dafür kein eigenes Element, daher wird fast immer eine Checkbox per CSS neu gestaltet. Nutzer erwarten, dass ein Schalter sofort wirkt und keinen eigenen Speichern-Knopf braucht; das unterscheidet ihn im Einsatz von der Checkbox.

Was ist :focus-visible?

:focus-visible ist ein CSS-Selektor, der greift, wenn ein Element per Tastatur oder auf einem anderen Weg fokussiert wird, bei dem ein Fokusring sinnvoll ist. Beim Mausklick greift er in den meisten Browsern nicht. So sehen Tastaturnutzer den Ring, Mausnutzer keinen störenden Rahmen. Unterstützt seit Chrome 86, Firefox 85 und Safari 15.4.

Checkbox oder Toggle Switch: Was ist der Unterschied?

Im Code sind beide dasselbe <input type="checkbox">; der Unterschied liegt im Aussehen und im Versprechen. Eine Checkbox markiert eine Auswahl, die meist am Formularende mit einem Knopf abgeschickt wird. Ein Schalter schaltet eine Einstellung ein oder aus und signalisiert, dass die Änderung sofort gilt. Für Screenreader bekommt der Schalter role="switch", die Checkbox nicht; das Werkzeug folgt dieser Regel in beiden Stilen.

Vorsicht: display:none nimmt die Checkbox aus der Tastaturbedienung

Viele Beispiele im Netz verstecken die echte Checkbox mit display:none oder visibility:hidden. Optisch ändert sich nichts, aber das Eingabefeld verschwindet auch aus der Tab-Reihenfolge und für Screenreader: Mit der Maus lässt sich der Schalter umlegen, per Tastatur oder Screenreader nicht. Dieses Werkzeug versteckt die Checkbox mit opacity:0 und 1 Pixel Größe; sie ist unsichtbar, bleibt aber zugänglich.

Die zweite Falle ist der Fokus. Wer nur outline:none schreibt, lässt Tastaturnutzer im Unklaren, wo sie sind. Der erzeugte Code enthält eine :focus-visible-Regel: Beim Mausklick erscheint kein Ring, bei Tastaturfokus ein Ring in Ihrer Farbe. Das entspricht auch der Anforderung der BITV an sichtbaren Fokus.

Schalter oder Checkbox?

Beide speichern dasselbe Ein/Aus, versprechen aber Unterschiedliches:

• Einstellung wirkt sofort (Dunkelmodus, Benachrichtigungen) → Schalter
• Auswahl wird mit einem Formular und "Speichern" gesendet (AGB akzeptieren) → Checkbox
• Mehrere Einträge aus einer Liste wählbar → Checkbox
• Soll wie eine App-Einstellung aussehen → runder Schalter
• Sachliche Oberfläche mit klaren Kanten → eckiger Schalter

Häufige Fragen

Funktioniert das wirklich ohne JavaScript?

Ja. Das Umschalten übernimmt die eingebaute Checkbox des Browsers; das CSS ändert nur Farbe und Position des Knopfs anhand von :checked. Soll beim Umschalten etwas passieren, etwa das Speichern einer Einstellung, hängen Sie Ihr eigenes JavaScript-Ereignis an das Eingabefeld.

Wozu dient role="switch"?

Es teilt Screenreadern mit, dass es sich um einen Ein/Aus-Schalter und nicht um eine Checkbox handelt; vorgelesen wird dann "aus" statt "nicht aktiviert". Beim Stil "Eigene Checkbox" entfällt die Rolle, weil das Element dort tatsächlich eine Checkbox ist.

Kann ich mehrere Schalter auf einer Seite verwenden?

Ja. Den <style>-Block fügen Sie einmal ein, den <label>-Block kopieren Sie so oft wie nötig und ändern nur den Text. Soll ein Schalter eingeschaltet starten, ergänzen Sie checked im input-Element.

Was speichert Herunterladen?

Eine PNG-Vorschau mit Aus- und Ein-Zustand übereinander, praktisch für Designabnahmen oder Dokumentation. Den Code selbst übernehmen Sie mit "Ausgabe kopieren".