CSS Switch-generator

Juster kontrollene for å designe en veksleknapp, klikk på den levende forhåndsvisningen for å se den animeres, og kopier deretter ferdig HTML og CSS. Still inn bredde, høyde, av/på-spor-farger, hendelfarge, hjørneavrunding og overgangshastighet — resultatet er en vanlig, tilgjengelig checkbox-basert veksleknapp, ikke bare en dekorativ form.

Hva er dette verktøyet?

En CSS-veksleknapp er en avkrysningsboks stylet til å se ut og oppføre seg som en fysisk av/på-bryter — et pilleformet spor med en rund «hendel» som glir fra den ene siden til den andre. Under panseret er det fortsatt en ekte avkrysningsboks, og det er viktig: det gjør kontrollen tilgjengelig med tastatur og fungerer med skjermlesere og skjemainnsending, i motsetning til en bryter bygget bare av klikkbare div-er.

Dette verktøyet bygger dette mønsteret for deg: en skjult avkrysningsboks, et spor som endrer farge basert på :checked, og en hendel som glir ved hjelp av en CSS-transform. Juster glidebryterne og fargevelgerne, klikk på forhåndsvisningen for å teste selve veksleanimasjonen, og kopier både CSS-en og den minimale HTML-markeringen den er avhengig av.

Kilde: WAI-ARIA Authoring Practices, W3C — anbefaler en ekte avkrysningsboks som det tilgjengelige grunnlaget for en switch-kontroll, og det er derfor denne generatorens output beholder det underliggende input-elementet.

Hvorfor bruke det?

Forhåndsvisningen er en ekte, klikkbar veksleknapp — ikke et statisk bilde — så du kan teste selve animasjonen før du tar den i bruk.
Gir deg både CSS-en og den tilgjengelige HTML-strukturen (checkbox-input + label) som CSS-en er avhengig av.
Full kontroll over sporbredde/høyde, av-tilstandens farge, på-tilstandens farge, hendelfarge, hjørneavrunding og overgangshastighet.
Bruker det vanlige checkbox + :checked-mønsteret, så veksleknappen forblir navigerbar med tastatur og fungerer i ekte skjemaer.
Kjører helt i nettleseren din — ingenting du stiller inn lastes opp noe sted.
Gratis, ingen registrering, fungerer på mobil.

Slik bruker du det

Still inn bredde og høyde for å bestemme sporets størrelse — hendelen tilpasses automatisk til å passe inni med litt margin.
Velg av-tilstandens farge for sporets standardutseende (ikke avkrysset), og på-tilstandens farge for når den er slått på.
Velg en hendelfarge — hvit eller en lys nøytral farge gir vanligvis best kontrast mot sporet.
Sett hjørneradiusen til 50 % for en klassisk pilleformet bryter, eller senk den for en litt avrundet rektangel i stedet.
Juster overgangshastigheten for å styre hvor raskt hendelen glir og sporfargen tones over mellom tilstandene.
Klikk på veksleknappen i forhåndsvisningen for å bekrefte at animasjonen ser riktig ut, og kopier deretter CSS-en og HTML-en inn i prosjektet ditt.

Eksempel

Inndata

Bredde: 52px · Høyde: 28px · Av-farge: #cbd5e1 · På-farge: #ea580c · Radius: 50 % · Hastighet: 200ms

Resultat

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

Kjernen i mønsteret: avkrysningsboksens :checked-tilstand, kombinert med den generelle søskenselektoren (~), driver både sporets bakgrunnsfarge og hvor langt hendelen glir.

Hvorfor en avkrysningsboks fremfor en div med en klikk-hendler

Det er fristende å bygge en veksleknapp av to <div>-elementer og litt JavaScript som bytter klasse ved klikk, men den fremgangsmåten ødelegger som regel tastaturnavigasjon, skjermleser-annonseringer og skjemainnsending — en ekte avkrysningsboks håndterer alle tre gratis. Mønsteret dette verktøyet genererer beholder <input type="checkbox"> som det faktiske interaktive elementet (visuelt skjult, men fortsatt fokuserbart), og bruker ren CSS — ingen JavaScript i det hele tatt — for å style sporet og hendelen basert på avkrysningsboksens innebygde :checked-tilstand.

Vanlige switch-stiler

Klassisk pille-switch: hjørneradius på 50 %, moderat størrelse (48–56px bred), en tydelig fargeendring mellom på/av.
Innstillingspanel-switch: mindre størrelse (36–44px bred), dempet av-farge (lysegrå) mot en merkevarefarget på-tilstand.
Litt avrundet switch: hjørneradius rundt 20–30 % i stedet for en full pille, for et mer rektangulært, app-aktig utseende.
Rask, kvikk switch: overgangshastighet på 100–150ms føles umiddelbar og responsiv.
Langsom, bevisst switch: overgangshastighet på 300–400ms oppleves mykere og mer polert, nyttig for en enkelt fremtredende innstillingsbryter.

Kombiner med andre CSS-verktøy

Det genererte sporet og hendelen bruker allerede border-radius under panseret, så hvis du ønsker en firkantet eller annerledes avrundet variant utover det glidebryteren tilbyr, lar Border Radius-generatoren deg finjustere hvert hjørne separat før du limer inn verdien. Box Shadow-generatoren er nyttig for å legge til en subtil skygge på hendelen for ekstra dybde.

→ Border Radius-generator · Box Shadow-generator

Ofte stilte spørsmål

Hvorfor inneholder resultatet HTML, ikke bare CSS?

En veksleknapp er ikke bare visuell — den er avhengig av en ekte <input type="checkbox"> pakket inn i en <label>, pluss spor- og hendelelementene som CSS-en retter seg mot. Uten nøyaktig denne strukturen har de :checked-baserte selektorene i den genererte CSS-en ingenting å feste seg til, så begge delene kopieres sammen.

Er denne veksleknappen tilgjengelig?

Ja — siden det interaktive elementet er en ekte avkrysningsboks (bare visuelt skjult med en teknikk som holder den i tilgjengelighetstreet, ikke display:none), forblir den fokuserbar med Tab, kan slås av/på med mellomrom eller Enter, og annonseres korrekt av skjermlesere som en avkrysningsboks i sin gjeldende tilstand.

Kan jeg bruke denne inni et ekte HTML-skjema?

Ja. Siden det underliggende elementet er en standard checkbox-input, kan du gi den et name- og value-attributt, og den sendes inn akkurat som enhver annen avkrysningsboks — avkryssede brytere sender verdien sin, ikke-avkryssede utelates, akkurat som en vanlig avkrysningsboks.

Hvorfor beveger hendelen seg med transform i stedet for å endre left-posisjonen?

Å animere transform: translateX() håndteres av nettleserens kompositor og forblir jevnt selv på svakere enheter, mens animering av left utløser layoutberegning på hver bildeoppdatering. Den genererte CSS-en bruker alltid transform for glidebevegelsen av denne grunnen.

Hva styrer egentlig hjørneradius-glidebryteren?

Den skalerer både sporets hjørneavrunding og hendelens hjørneavrunding sammen, proporsjonalt med sporets høyde. Ved 50 % får du en helt avrundet pille med en rund hendel; lavere verdier holder formen mer rektangulær for en firkantet, app-aktig switch.