Toggle-Switch-Generator (Ein/Aus-Schalter) CSS
Passe Größe und Farben an und teste die Vorschau. Der Code nutzt eine echte Checkbox, funktioniert also in Formularen und mit der Tastatur.
So geht’sEin/Aus-Schalter ohne JavaScript
Verfügbar auf: 
Toggle-Switch-Generator (Ein/Aus-Schalter) CSS: wofür es gut ist
Der Ein/Aus-Schalter wird bei Einstellungen, Anmeldeformularen und Konfigurationen genutzt. Dieser Generator baut den Schalter mit einer echten, per CSS gestalteten Checkbox, ohne JavaScript: Er speichert den Zustand, funktioniert mit Tastatur und Touch, wird beim Absenden des Formulars mitgesendet und vom Screenreader dank role=switch als an oder aus angesagt.
Du passt Breite, Höhe, Ecken und Farben an und testest das Ergebnis an, aus und deaktiviert. Der Code enthält den sichtbaren Fokus, den sanften Übergang, der beachtet, wer weniger Bewegung bevorzugt, und den Hochkontrastmodus.
So geht’s
- Passe Größe und Ecken an.
- Wähle Farben und Text des Labels.
- Kopiere HTML und CSS.
Wann nutzen
- Benachrichtigungseinstellungen.
- Dunkelmodus der Website.
- Zustimmung zu Bedingungen im Formular.
Häufige Fragen
Braucht es JavaScript?
Nicht, damit es funktioniert. Nur wenn du etwas tun willst, wenn der Schalter wechselt, wie die Einstellung speichern, genügt es, das Ereignis change des Inputs abzuhören.
Welche Größe nutze ich am Handy?
Die Touch-Fläche soll nach WCAG 2.2 mindestens 24 mal 24 px haben, und empfohlen für den Finger sind etwa 44 px. Da der Text daneben auch zum Label gehört, vergrößert er die klickbare Fläche.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.