CSS Switch generátor

Állítsd be a vezérlőket egy kapcsoló tervezéséhez, kattints az élő előnézetre, hogy lásd az animációját, majd másold ki a kész HTML-t és CSS-t. Állítsd be a szélességet, magasságot, a ki-/bekapcsolt sáv színét, a csúszka színét, a sarok lekerekítését és az átmenet sebességét — a kimenet egy szabványos, akadálymentes, checkbox-alapú kapcsoló, nem csak egy díszítő forma.

Mi ez az eszköz?

A CSS kapcsoló (toggle switch) egy jelölőnégyzet, amely úgy néz ki és úgy viselkedik, mint egy fizikai be/ki kapcsoló — egy pirula alakú sáv, amelyen egy kör alakú csúszka mozog az egyik oldalról a másikra. A háttérben mégis egy valódi checkbox input, ami számít: ez teszi a vezérlőt billentyűzettel elérhetővé, és használhatóvá a képernyőolvasókkal és az űrlapbeküldéssel, ellentétben egy tisztán kattintható div-ekből épített kapcsolóval.

Ez az eszköz felépíti neked ezt a mintát: egy elrejtett checkbox-ot, egy sávot, amely a :checked állapot alapján színt vált, és egy csúszkát, amely CSS transformmal mozog. Állítsd be a csúszkákat és a színválasztókat, kattints az előnézetre, hogy teszteld a tényleges kapcsoló animációt, majd másold ki mind a CSS-t, mind a minimális HTML jelölést, amelytől függ.

Forrás: WAI-ARIA Authoring Practices, W3C — egy valódi checkbox inputot ajánl a kapcsoló vezérlő akadálymentes alapjaként, ezért tartja meg ennek a generátornak a kimenete az alapul szolgáló input elemet.

Miért érdemes használni?

Az előnézet valódi, kattintható kapcsoló — nem statikus kép —, így tesztelheted a pontos animációt, mielőtt használnád.
Kiadja mind a CSS-t, mind az akadálymentes HTML szerkezetet (checkbox input + label), amelytől a CSS függ.
Teljes kontroll a sáv szélessége/magassága, a kikapcsolt állapot színe, a bekapcsolt állapot színe, a csúszka színe, a sarok lekerekítése és az átmenet sebessége felett.
A szabványos checkbox + :checked szelektor mintát használja, így a kapcsoló billentyűzettel navigálható marad, és valódi űrlapokon belül is működik.
Teljes egészében a böngésződben fut — semmi, amit beállítasz, nem kerül feltöltésre sehova.
Ingyenes, nincs regisztráció, mobilon is működik.

Használati útmutató

Állítsd be a szélességet és magasságot a sáv méretezéséhez — a csúszka mérete automatikusan úgy alakul, hogy kis térközzel beleférjen.
Válaszd ki a kikapcsolt állapot színét a sáv alapértelmezett (nem bejelölt) megjelenéséhez, és a bekapcsolt állapot színét, amikor be van kapcsolva.
Válassz csúszkaszínt — a fehér vagy egy világos semleges szín általában a legerősebb kontrasztot adja a sávhoz képest.
Állítsd a border-radius-t 50%-ra egy klasszikus pirula alakú kapcsolóhoz, vagy csökkentsd egy kicsit lekerekített téglalaphoz.
Állítsd be az átmenet sebességét, hogy szabályozd, milyen gyorsan csúszik a csúszka és halványul át a sáv színe az állapotok között.
Kattints az előnézeti kapcsolóra, hogy megerősítsd, jól néz ki az animáció, majd másold ki a CSS-t és a HTML-t a projektedbe.

Példa

Bemenet

Szélesség: 52px · Magasság: 28px · Kikapcsolt szín: #cbd5e1 · Bekapcsolt szín: #ea580c · Lekerekítés: 50% · Sebesség: 200ms

Kimenet

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

A minta lényege: a checkbox :checked állapota, kombinálva az általános testvérszelektorral (~), hajtja mind a sáv háttérszínét, mind a csúszka mozgási távolságát.

Miért checkbox, nem pedig div egy kattintáskezelővel

Csábító lehet egy kapcsolót két <div> elemből és egy kattintáskor osztályt cserélő JavaScript darabból felépíteni, de ez a megközelítés általában elrontja a billentyűzetes navigációt, a képernyőolvasó-bejelentéseket és az űrlapbeküldést — egy valódi checkbox mindhármat ingyen kezeli. Az ezen eszköz által generált minta megtartja az <input type="checkbox">-ot a tényleges interaktív elemként (vizuálisan elrejtve, de továbbra is fókuszálható), és tiszta CSS-t használ — semmi JavaScript —, hogy stílusozza a sávot és a csúszkát a checkbox natív :checked állapota alapján.

Gyakori kapcsolóstílusok

Klasszikus pirula kapcsoló: border-radius 50%-on, közepes méret (48–56px széles), egyértelmű színváltás a ki/be állapotok között.
Beállításpanel kapcsoló: kisebb méret (36–44px széles), tompított kikapcsolt szín (világosszürke) egy márkaszínű bekapcsolt állapottal szemben.
Enyhén lekerekített kapcsoló: border-radius kb. 20–30% egy teljes pirula helyett, egy inkább téglalap alakú, alkalmazásszerű megjelenésért.
Gyors, pattanós kapcsoló: 100–150ms közötti átmenet sebesség azonnalinak és reszponzívnak hat.
Lassú, megfontolt kapcsoló: 300–400ms közötti átmenet sebesség simábbnak és kidolgozottabbnak hat, hasznos egyetlen kiemelt beállítás-kapcsolóhoz.

Párosítás más CSS eszközökkel

A generált sáv és csúszka már eleve border-radius-t használ a háttérben, így ha a csúszka által kínáltnál élesebb vagy másképp lekerekített variánst szeretnél, a Border Radius generátor lehetővé teszi, hogy minden sarkot külön finomhangolj, mielőtt beillesztenéd az értéket. A Box Shadow generátor hasznos egy finom árnyék hozzáadásához a csúszkához, extra mélységért.

→ Border Radius Generátor · Box Shadow Generátor

Gyakori kérdések

Miért tartalmaz a kimenet HTML-t is, nem csak CSS-t?

Egy kapcsoló nem tisztán vizuális — egy valódi <input type="checkbox">-tól függ, amely egy <label>-be van csomagolva, plusz a sáv és csúszka elemektől, amelyeket a CSS céloz. Enélkül a pontos szerkezet nélkül a generált CSS-ben lévő :checked-alapú szelektoroknak nincs mihez kapcsolódniuk, ezért mindkét részt együtt másoljuk.

Akadálymentes ez a kapcsoló?

Igen — mivel az interaktív elem egy valódi checkbox (csak vizuálisan elrejtve egy olyan technikával, amely megtartja az akadálymentességi fában, nem display:none-nal), fókuszálható marad Tab-bal, kapcsolható Szóközzel vagy Enterrel, és a képernyőolvasók helyesen bemondják jelölőnégyzetként, aktuális bejelölt/nem bejelölt állapotában.

Használhatom ezt egy valódi HTML űrlapon belül?

Igen. Mivel az alapul szolgáló elem egy szabványos checkbox input, adhatsz neki name és value attribútumot, és úgy fog beküldeni, mint bármely más jelölőnégyzet — a bejelölt kapcsolók elküldik az értéküket, a nem bejelöltek kimaradnak, pontosan úgy, mint egy normál checkbox.

Miért transformmal mozog a csúszka, nem a left pozíció változtatásával?

A transform: translateX() animálását a böngésző kompozitora kezeli, és sima marad még gyengébb eszközökön is, míg a left animálása minden képkockán layout-újraszámítást vált ki. A generált CSS emiatt mindig transformot használ a csúszó mozgáshoz.

Mit szabályoz valójában a lekerekítés csúszka?

Egyszerre skálázza a sáv sarok-lekerekítését és a csúszka sarok-lekerekítését, arányosan a sáv magasságához. 50%-nál teljesen lekerekített pirulát kapsz kör alakú csúszkával; alacsonyabb értékeknél a forma inkább téglalap marad, egy szögletesebb, alkalmazásszerű kapcsolóhoz.