Generátor CSS přepínače

Co je tento nástroj?

CSS přepínač je zaškrtávací pole stylované tak, aby vypadalo a chovalo se jako fyzický přepínač zapnuto/vypnuto — pilulkovitá dráha s kruhovým knoflíkem, který klouže z jedné strany na druhou. Pod kapotou jde stále o skutečný vstup checkbox, což je důležité: udržuje ovládací prvek přístupný klávesnicí a použitelný se čtečkami obrazovky a odesíláním formulářů, na rozdíl od přepínače postaveného čistě z klikatelných divů.

Tento nástroj za vás sestaví tento vzor: skryté zaškrtávací pole, dráhu, která mění barvu na základě :checked, a knoflík, který klouže pomocí CSS transformace. Upravte posuvníky a výběry barev, klikněte na náhled pro otestování skutečné animace přepínače a zkopírujte jak CSS, tak minimální HTML markup, na kterém závisí.

Zdroj: WAI-ARIA Authoring Practices, W3C — doporučuje skutečný vstup checkbox jako přístupný základ pro ovládací prvek přepínače, což je důvod, proč výstup tohoto generátoru zachovává podkladový vstupní element.

Proč ho používat?

• Náhled je skutečný, klikatelný přepínač — ne statický obrázek — takže si přesnou animaci můžete otestovat před použitím.
• Vypisuje jak CSS, tak přístupnou HTML strukturu (vstup checkbox + label), na které CSS závisí.
• Plná kontrola nad šířkou/výškou dráhy, barvou vypnutého stavu, barvou zapnutého stavu, barvou knoflíku, zaoblením rohů a rychlostí přechodu.
• Používá standardní vzor checkbox + selektor :checked, takže přepínač zůstává navigovatelný klávesnicí a funguje v reálných formulářích.
• Běží kompletně ve vašem prohlížeči — nic, co nastavíte, se nikam nenahrává.
• Zdarma, bez registrace, funguje na mobilu.

Jak se používá

1. Nastavte šířku a výšku pro velikost dráhy — knoflík se automaticky nastaví tak, aby se vešel dovnitř s malým odsazením.
2. Vyberte barvu vypnutého stavu pro výchozí (nezaškrtnutý) vzhled dráhy a barvu zapnutého stavu pro stav po přepnutí.
3. Zvolte barvu knoflíku — bílá nebo světle neutrální obvykle poskytuje nejsilnější kontrast proti dráze.
4. Nastavte poloměr rohu na 50 % pro klasický pilulkovitý přepínač, nebo ho snižte pro mírně zaoblený obdélník.
5. Upravte rychlost přechodu, abyste ovládli, jak rychle knoflík klouže a barva dráhy se prolíná mezi stavy.
6. Klikněte na náhledový přepínač, abyste potvrdili, že animace vypadá správně, poté zkopírujte CSS a HTML do svého projektu.

Příklad

Vstup

Šířka: 52px · Výška: 28px · Barva vypnuto: #cbd5e1 · Barva zapnuto: #ea580c · Poloměr: 50% · Rychlost: 200ms

Výstup

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

Jádro vzoru: stav :checked zaškrtávacího pole v kombinaci s obecným sourozeneckým selektorem (~) řídí jak barvu pozadí dráhy, tak vzdálenost posunu knoflíku.

Proč zaškrtávací pole místo divu s obslužnou funkcí kliknutí

Je lákavé postavit přepínač ze dvou <div> elementů a trochy JavaScriptu, který přepíná třídu při kliknutí, ale tento přístup obvykle rozbíjí navigaci klávesnicí, oznamování čtečkou obrazovky a odesílání formuláře — skutečné zaškrtávací pole to všechno tři zajišťuje zdarma. Vzor, který tento nástroj generuje, ponechává <input type="checkbox"> jako skutečný interaktivní element (vizuálně skrytý, ale stále zaostřitelný), a používá čisté CSS — žádný JavaScript vůbec — ke stylování dráhy a knoflíku na základě nativního stavu :checked zaškrtávacího pole.

Běžné styly přepínačů

• Klasický pilulkovitý přepínač: poloměr rohu na 50 %, střední velikost (48–56px šířky), jasná změna barvy mezi zapnuto/vypnuto.
• Přepínač nastavení: menší velikost (36–44px šířky), tlumená vypnutá barva (světle šedá) proti zapnutému stavu ve značkové barvě.
• Mírně zaoblený přepínač: poloměr rohu kolem 20–30 % místo plné pilulky, pro obdélníkovější, aplikačnější vzhled.
• Rychlý, svižný přepínač: rychlost přechodu 100–150 ms působí okamžitě a responzivně.
• Pomalý, uvážlivý přepínač: rychlost přechodu 300–400 ms se čte jako plynulejší a propracovanější, užitečné pro jeden výrazný přepínač nastavení.

Kombinace s dalšími CSS nástroji

Vygenerovaná dráha a knoflík už pod kapotou používají border-radius, takže pokud chcete čtvercovanou nebo jinak zaoblenou variantu nad rámec toho, co posuvník nabízí, Generátor Border Radius vám umožní doladit každý roh nezávisle před vložením hodnoty. Generátor Box Shadow je užitečný pro přidání jemného stínu knoflíku pro extra hloubku.

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

Časté dotazy