Generátor CSS prepínačov

Čo je tento nástroj?

CSS toggle prepínač je checkbox naštýlovaný tak, aby vyzeral a fungoval ako fyzický vypínač — pilulkovitá dráha s kruhovým posuvníkom, ktorý sa posúva z jednej strany na druhú. Pod povrchom je to stále skutočný checkbox input, čo je dôležité: udržiava ovládací prvok prístupný z klávesnice a použiteľný s čítačkami obrazovky a pri odosielaní formulárov, na rozdiel od prepínača postaveného čisto z klikateľných divov.

Tento nástroj vám tento vzor postaví: skrytý checkbox, dráha, ktorá mení farbu podľa :checked, a posuvník, ktorý sa posúva pomocou CSS transform. Upravte posuvníky a výber farieb, kliknutím na náhľad otestujte skutočnú animáciu prepínača a skopírujte CSS aj minimálny HTML kód, od ktorého závisí.

Zdroj: WAI-ARIA Authoring Practices, W3C — odporúča skutočný checkbox input ako prístupný základ prepínača, preto výstup tohto generátora zachováva pôvodný input element.

Prečo ho používať?

• Náhľad je skutočný, klikateľný prepínač — nie statický obrázok — takže si presnú animáciu môžete otestovať pred použitím.
• Vypíše CSS aj prístupnú HTML štruktúru (checkbox input + label), od ktorej CSS závisí.
• Plná kontrola nad šírkou/výškou dráhy, farbou vypnutého stavu, farbou zapnutého stavu, farbou posuvníka, zaoblením rohov a rýchlosťou prechodu.
• Používa štandardný vzor checkbox + selektor :checked, takže prepínač zostáva ovládateľný klávesnicou a funguje v skutočných formulároch.
• Beží celé vo vašom prehliadači — nič, čo nastavíte, sa nikam nenahráva.
• Zadarmo, bez registrácie, funguje na mobile.

Ako sa používa

1. Nastavte šírku a výšku pre veľkosť dráhy — posuvník sa automaticky prispôsobí veľkosti s malým odsadením.
2. Vyberte farbu vypnutého stavu pre predvolený (nezaškrtnutý) vzhľad dráhy a farbu zapnutého stavu pre stav po prepnutí.
3. Zvoľte farbu posuvníka — biela alebo svetlá neutrálna farba zvyčajne poskytuje najsilnejší kontrast voči dráhe.
4. Nastavte polomer okraja na 50 % pre klasický pilulkovitý prepínač, alebo ho znížte pre mierne zaoblený obdĺžnik.
5. Upravte rýchlosť prechodu, aby ste ovládali, ako rýchlo sa posuvník posúva a farba dráhy sa prelína medzi stavmi.
6. Kliknite na prepínač v náhľade a overte, či animácia vyzerá správne, potom skopírujte CSS a HTML do svojho projektu.

Príklad

Vstup

Šírka: 52px · Výška: 28px · Farba vypnuté: #cbd5e1 · Farba zapnuté: #ea580c · Polomer: 50 % · Rýchlosť: 200ms

Výstup

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

Jadro vzoru: stav :checked checkboxu v kombinácii so všeobecným selektorom súrodenca (~) riadi farbu pozadia dráhy aj vzdialenosť posunu posuvníka.

Prečo checkbox namiesto div s click handlerom

Je lákavé postaviť prepínač z dvoch prvkov <div> a kúska JavaScriptu, ktorý pri kliknutí prehodí triedu, no tento prístup zvyčajne rozbije navigáciu klávesnicou, oznámenia čítačky obrazovky a odosielanie formulárov — skutočný checkbox rieši všetky tri veci zadarmo. Vzor, ktorý tento nástroj generuje, zachováva <input type="checkbox"> ako skutočný interaktívny prvok (vizuálne skrytý, ale stále zaostriteľný) a používa čisté CSS — vôbec žiadny JavaScript — na naštýlovanie dráhy a posuvníka podľa natívneho stavu :checked checkboxu.

Bežné štýly prepínačov

• Klasický pilulkovitý prepínač: polomer okraja na 50 %, stredná veľkosť (48 – 56 px šírka), jasná zmena farby medzi zapnutým/vypnutým stavom.
• Prepínač v nastaveniach: menšia veľkosť (36 – 44 px šírka), tlmená farba vo vypnutom stave (svetlá sivá) oproti farbe značky v zapnutom stave.
• Mierne zaoblený prepínač: polomer okraja okolo 20 – 30 % namiesto plnej pilulky, pre viac obdĺžnikový, aplikačný vzhľad.
• Rýchly, svižný prepínač: rýchlosť prechodu 100 – 150ms pôsobí okamžite a responzívne.
• Pomalý, uvážený prepínač: rýchlosť prechodu 300 – 400ms pôsobí plynulejšie a vyladenejšie, vhodné pre jeden výrazný prepínač v nastaveniach.

Kombinácia s ďalšími CSS nástrojmi

Vygenerovaná dráha aj posuvník už pod povrchom používajú border-radius, takže ak chcete hranatejší alebo inak zaoblený variant nad rámec toho, čo ponúka posuvník, Generátor Border Radius vám umožní doladiť každý roh nezávisle pred vložením hodnoty. Generátor Box Shadow je užitočný na pridanie jemného tieňa posuvníku pre extra hĺbku.

→ Generátor border-radius · Generátor box-shadow

Časté otázky