CodeKitHubHvad er dette værktøj?
En CSS toggle-switch er en checkbox, der er styled til at se ud og opføre sig som en fysisk tænd/sluk-kontakt — et pillformet track med en cirkulær thumb, der glider fra den ene side til den anden. Under motorhjelmen er det stadig et rigtigt checkbox-input, og det betyder noget: det holder kontrollen tastaturtilgængelig og brugbar med skærmlæsere og formularindsendelser, i modsætning til en switch bygget rent af klikbare divs.
Dette værktøj bygger det mønster for dig: en skjult checkbox, et track der skifter farve baseret på :checked, og en thumb der glider ved hjælp af en CSS-transform. Justér skydere og farvevælgere, klik på preview'et for at teste den faktiske toggle-animation, og kopiér både CSS'en og den minimale HTML-markup, den afhænger af.
Kilde: WAI-ARIA Authoring Practices, W3C — anbefaler et rigtigt checkbox-input som det tilgængelige grundlag for en switch-kontrol, hvilket er derfor denne generators output beholder det underliggende input-element.
Hvorfor bruge det?
- Preview'et er en rigtig, klikbar toggle — ikke et statisk billede — så du kan teste den præcise animation, før du bruger den.
- Genererer både CSS'en og den tilgængelige HTML-struktur (checkbox-input + label), som CSS'en afhænger af.
- Fuld kontrol over track-bredde/-højde, farve i sluk-tilstand, farve i tænd-tilstand, thumb-farve, hjørneafrunding og overgangshastighed.
- Bruger det standardiserede checkbox + :checked-mønster, så toggle'en forbliver tastaturnavigerbar og virker i rigtige formularer.
- Kører helt i din browser — intet du konfigurerer bliver uploadet nogen steder.
- Gratis, ingen tilmelding, virker på mobil.
Sådan bruger du det
- Sæt bredde og højde for at fastsætte størrelsen på track'et — thumb'en tilpasses automatisk til at passe indeni med lidt padding.
- Vælg farven for track'ets standard (unchecked) udseende, og farven for når den er slået til.
- Vælg en thumb-farve — hvid eller en lys neutral giver som regel den stærkeste kontrast mod track'et.
- Sæt border-radius til 50% for en klassisk pilleformet switch, eller sænk den for et lidt mere afrundet rektangel i stedet.
- Justér overgangshastigheden for at styre hvor hurtigt thumb'en glider og track-farven skifter mellem tilstande.
- Klik på preview-toggle'en for at bekræfte, at animationen ser rigtig ud, og kopiér derefter CSS'en og HTML'en ind i dit projekt.
Eksempel
Input
Bredde: 52px · Højde: 28px · Sluk-farve: #cbd5e1 · Tænd-farve: #ea580c · Radius: 50% · Hastighed: 200msOutput
.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }Kernen i mønstret: checkboxens :checked-tilstand, kombineret med den generelle sibling-selector (~), styrer både track'ets baggrundsfarve og thumb'ens glideafstand.
Hvorfor en checkbox i stedet for en div med en click-handler
Det er fristende at bygge en toggle af to <div>-elementer og lidt JavaScript, der bytter en klasse ved klik, men den tilgang ødelægger som regel tastaturnavigation, skærmlæser-annonceringer og formularindsendelse — en rigtig checkbox klarer alle tre gratis. Mønstret, dette værktøj genererer, bevarer <input type="checkbox"> som det egentlige interaktive element (visuelt skjult, men stadig fokuserbart), og bruger ren CSS — ingen JavaScript overhovedet — til at style track og thumb baseret på checkboxens native :checked-tilstand.
Almindelige switch-stilarter
- Klassisk pille-switch: border-radius på 50%, moderat størrelse (48–56px bred), et tydeligt farveskift mellem tænd/sluk.
- Indstillingspanel-switch: mindre størrelse (36–44px bred), dæmpet sluk-farve (lysegrå) mod en brand-farvet tænd-tilstand.
- Let afrundet switch: border-radius omkring 20–30% i stedet for en hel pille, for et mere rektangulært, app-agtigt udseende.
- Hurtig, snappy switch: overgangshastighed på 100–150ms føles umiddelbar og responsiv.
- Langsom, overlagt switch: overgangshastighed på 300–400ms opleves som mere glidende og poleret, nyttigt til en enkelt fremtrædende indstillings-toggle.
Kombinér med andre CSS-værktøjer
Det genererede track og thumb bruger allerede border-radius under motorhjelmen, så hvis du vil have en firkantet eller anderledes afrundet variant ud over det, skyderen tilbyder, lader Border Radius Generator dig finjustere hvert hjørne uafhængigt, før du indsætter værdien. Box Shadow Generator er nyttig til at tilføje en subtil skygge til thumb'en for ekstra dybde.
Ofte stillede spørgsmål
Hvorfor indeholder output HTML, ikke kun CSS?
En toggle-switch er ikke rent visuel — den afhænger af et rigtigt <input type="checkbox"> pakket ind i en <label>, plus de track- og thumb-elementer, CSS'en sigter mod. Uden præcis den struktur har de :checked-baserede selectors i den genererede CSS intet at hægte sig på, så begge dele kopieres sammen.
Er denne toggle tilgængelig?
Ja — fordi det interaktive element er en rigtig checkbox (bare visuelt skjult med en teknik, der holder den i accessibility-træet, ikke display:none), forbliver den fokuserbar med Tab, kan slås til/fra med Space eller Enter, og bliver korrekt annonceret af skærmlæsere som en checkbox i sin aktuelle checked/unchecked-tilstand.
Kan jeg bruge denne inde i en rigtig HTML-formular?
Ja. Da det underliggende element er et standard checkbox-input, kan du give den et name- og value-attribut, og den vil blive indsendt som enhver anden checkbox — checkede switches sender deres værdi, unchecked udelades, præcis som en almindelig checkbox.
Hvorfor bevæger thumb'en sig med transform i stedet for at ændre sin left-position?
Animation af transform: translateX() håndteres af browserens compositor og forbliver glidende selv på svagere enheder, mens animation af left udløser layout-genberegning i hver frame. Den genererede CSS bruger altid transform til glidebevægelsen af denne grund.
Hvad styrer border-radius-skyderen egentlig?
Den skalerer både track'ets hjørneafrunding og thumb'ens hjørneafrunding sammen, proportionalt med track'ets højde. Ved 50% får du en fuldt afrundet pille med en cirkulær thumb; lavere værdier holder formen mere rektangulær for en mere firkantet, app-agtig switch.