Aufgabenpfad / von der Eingabe zum Ergebnis
So gestaltest du einen reinen CSS-Schalter
- 01
Dimensioniere die Schiene
Setze Schienenbreite zwischen 44 und 128 px und Schienenhöhe zwischen 24 und 64 px. Die Breite muss die Höhe um mindestens 8 px übertreffen, damit der Regler Platz zum Wandern hat. Der Standard von 64 × 34 px spiegelt die Proportionen der meisten mobilen Schalter. 18 Vorlagen · Ausgewählt · Farbe
- 02
Passe den Regler ein
Wähle eine Reglergröße von 16 bis 56 px. Er muss in die Schiene passen — höchstens Schienenhöhe minus 4 px —, sonst springt der Status auf WERTE PRÜFEN mit der genauen Regel, die fehlgeschlagen ist.
- 03
Färbe beide Zustände
Diese Anleitung gilt für die Basisvorlage; Galerievorlagen besitzen eigene Formen, Farben, HTML-Strukturen und Zeitabläufe: Wähle Inaktive Schiene für die Aus-Position und Aktive Schiene für die An-Position. Der Regler selbst bleibt weiß mit einem kleinen weichen Schatten, beide Schienenfarben müssen also nur zu Weiß kontrastieren.
- 04
Sieh dir den Übergang in der Vorschau an
Diese Anleitung gilt für die Basisvorlage; Galerievorlagen besitzen eigene Formen, Farben, HTML-Strukturen und Zeitabläufe: Schalte Aktiven Zustand anzeigen um, um zu sehen, wie der Regler gleitet und die Schiene mit dem echten 180-ms-Ease-Timing umgefärbt wird. Der Innenabstand um den Regler wird als die Hälfte der übrigen Schienenhöhe berechnet, sodass der Sitz bei jeder gewählten Größe gleichmäßig bleibt.
- 05
Kopiere oder lade das CSS herunter
Drücke CSS kopieren oder .css herunterladen, um toolars-switch.css zu speichern. Der weiße Regler gleitet zwischen den Zuständen über die berechnete Strecke, und der Export enthält von Anfang an Fokus- und Reduced-Motion-Behandlung. Das Ausgabefeld zeigt die Live-Bytezahl, damit du siehst, wie kompakt die Komponente bleibt.
- 06
Setze das Markup zusammen
Platziere ein Checkbox-input gefolgt von einem .switch-track-Element innerhalb eines .switch-Containers, genau in dieser Reihenfolge — der Geschwisterselektor hängt davon ab. Das input schrumpft auf eine unsichtbare 1-px-Box, bleibt aber fokussierbar, und der Fokus zeichnet einen 3-px-Umriss in deiner Farbe der aktiven Schiene. HTML enthält das aktuelle CSS und ein funktionierendes Beispiel. Native Steuerelemente unterstützen Tastatureingaben.