CodeKitHubVad är detta verktyg?
En CSS-toggleknapp är en kryssruta styled att se ut och bete sig som en fysisk på/av-knapp — ett pillerformat spår med en cirkulär tumme som glider från ena sidan till den andra. Under huven är det fortfarande en riktig kryssruta, vilket spelar roll: det gör kontrollen tangentbordstillgänglig och användbar med skärmläsare och formulärinlämningar, till skillnad från en switch byggd enbart av klickbara divar.
Verktyget bygger detta mönster åt dig: en dold kryssruta, ett spår som ändrar färg baserat på :checked, och en tumme som glider med en CSS-transform. Justera reglagen och färgväljarna, klicka på förhandsvisningen för att testa den faktiska toggle-animationen, och kopiera både CSS:en och den minimala HTML-markeringen den beror på.
Källa: WAI-ARIA Authoring Practices, W3C — rekommenderar en riktig kryssruta som den tillgängliga grunden för en switch-kontroll, vilket är varför den här generatorns utdata behåller det underliggande input-elementet.
Varför använda det?
- Förhandsvisningen är en riktig, klickbar toggle — inte en statisk bild — så du kan testa exakt animation innan du använder den.
- Genererar både CSS:en och den tillgängliga HTML-strukturen (checkbox-input + label) som CSS:en beror på.
- Full kontroll över spårbredd/höjd, av-lägets färg, på-lägets färg, tumfärg, hörnrundning och övergångshastighet.
- Använder det vanliga checkbox + :checked-mönstret, så toggle förblir tangentbordsnavigerbar och fungerar i riktiga formulär.
- Körs helt i din webbläsare — inget du konfigurerar laddas upp någonstans.
- Gratis, ingen registrering, fungerar på mobil.
Så använder du det
- Ställ in bredd och höjd för att storleksbestämma spåret — tummen storleksanpassas automatiskt för att passa inuti med lite marginal.
- Välj av-lägets färg för spårets standardutseende (avmarkerad), och på-lägets färg för när den slås på.
- Välj en tumfärg — vit eller en ljus neutral ger oftast starkast kontrast mot spåret.
- Sätt hörnradien till 50 % för en klassisk pillerformad switch, eller sänk den för en lätt rundad rektangel istället.
- Justera övergångshastigheten för att styra hur snabbt tummen glider och spårfärgen tonar mellan lägena.
- Klicka på förhandsvisningens toggle för att bekräfta att animationen ser rätt ut, kopiera sedan CSS:en och HTML:en till ditt projekt.
Exempel
Inmatning
Bredd: 52px · Höjd: 28px · Av-färg: #cbd5e1 · På-färg: #ea580c · Radie: 50 % · Hastighet: 200msResultat
.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }Kärnan i mönstret: kryssrutans :checked-tillstånd, kombinerat med den generella syskonselektorn (~), driver både spårets bakgrundsfärg och tummens glidsträcka.
Varför en kryssruta istället för en div med klickhanterare
Det är lockande att bygga en toggle av två <div>-element och lite JavaScript som byter klass vid klick, men det angreppssättet brukar bryta tangentbordsnavigering, skärmläsarannonseringar och formulärinlämning — en riktig kryssruta hanterar alla tre gratis. Mönstret det här verktyget genererar behåller <input type="checkbox"> som det faktiska interaktiva elementet (visuellt dolt men fortfarande fokuserbart), och använder ren CSS — ingen JavaScript alls — för att styla spåret och tummen baserat på kryssrutans inbyggda :checked-tillstånd.
Vanliga switch-stilar
- Klassisk pillerswitch: hörnradie på 50 %, måttlig storlek (48–56px bred), en tydlig färgändring mellan på/av.
- Inställningspanel-switch: mindre storlek (36–44px bred), dämpad av-färg (ljusgrå) mot en märkesfärgad på-status.
- Lätt rundad switch: hörnradie runt 20–30 % istället för en full piller, för ett mer rektangulärt, app-likt utseende.
- Snabb, kvick switch: övergångshastighet på 100–150ms känns omedelbar och responsiv.
- Långsam, medveten switch: övergångshastighet på 300–400ms upplevs mjukare och mer polerad, användbart för en enda framträdande inställningsswitch.
Kombinera med andra CSS-verktyg
Det genererade spåret och tummen använder redan border-radius under huven, så om du vill ha en fyrkantig eller annorlunda rundad variant utöver vad reglaget erbjuder, låter Border Radius-generatorn dig finjustera varje hörn separat innan du klistrar in värdet. Box Shadow-generatorn är användbar för att lägga till en subtil skugga på tummen för extra djup.
Vanliga frågor
Varför innehåller utdata HTML, inte bara CSS?
En toggleknapp är inte bara visuell — den beror på en riktig <input type="checkbox"> insvept i en <label>, plus spår- och tumelementen som CSS:en riktar sig mot. Utan exakt den strukturen har de :checked-baserade selektorerna i den genererade CSS:en inget att fästa vid, så båda delarna kopieras tillsammans.
Är den här togglen tillgänglig?
Ja — eftersom det interaktiva elementet är en riktig kryssruta (bara visuellt dold med en teknik som håller den kvar i tillgänglighetsträdet, inte display:none), förblir den fokuserbar med Tab, växlingsbar med mellanslag eller Enter, och korrekt annonserad av skärmläsare som en kryssruta i sitt aktuella markerade/omarkerade tillstånd.
Kan jag använda den här inuti ett riktigt HTML-formulär?
Ja. Eftersom det underliggande elementet är en vanlig checkbox-input kan du ge den ett name- och value-attribut och den kommer att skickas som vilken annan kryssruta som helst — markerade switchar skickar sitt värde, omarkerade utelämnas, precis som en vanlig kryssruta.
Varför rör sig tummen med transform istället för att ändra sin left-position?
Att animera transform: translateX() hanteras av webbläsarens kompositor och förblir smidigt även på enklare enheter, medan animering av left utlöser layoutberäkning på varje bildruta. Den genererade CSS:en använder alltid transform för glidrörelsen av den anledningen.
Vad styr hörnradiereglaget egentligen?
Det skalar både spårets hörnrundning och tummens hörnrundning tillsammans, proportionellt mot spårets höjd. Vid 50 % får du en helt rundad piller med en cirkulär tumme; lägre värden håller formen mer rektangulär för en fyrkantigare, app-liknande switch.