CodeKitHubMi ez az eszköz?
A böngésző alapértelmezett jelölőnégyzetei böngészőnként eltérően néznek ki, és nehéz közvetlenül átstílusozni őket, mivel a beépített megjelenésüket az operációs rendszer rajzolja, nem a sima CSS. A szokásos megoldás az, hogy a natív jelölőnégyzetet vizuálisan elrejtjük, és helyette egy testvérelemet stílusozunk, a jelölőnégyzet :checked állapota alapján vezérelve — az input teljesen funkcionális és akadálymentes marad, csak a megjelenése változik.
Ez az eszköz három gyakori jelölőnégyzet-stílushoz építi fel ezt a mintát: egy lekerekített doboz animált pipával, egy iOS-stílusú csúszó kapcsoló és egy kitöltött kör (rádiógomb-szerű) stílus. Kattints a jelölőnégyzetre az előnézetben, hogy lásd a bejelölt állapotot, állítsd be a méretet és a kiemelőszínt, majd másold ki a CSS-t.
Forrás: Selectors Level 4, W3C — a specifikáció, amely meghatározza a :checked pszeudo-osztályt, amelyre ez a technika épül.
Miért érdemes használni?
- Élő, kattintható előnézet — kapcsold be/ki a jelölőnégyzetet, hogy pontosan lásd, hogyan néz ki a bejelölt és a nem bejelölt állapot.
- Három különálló, gyakran használt stílus egy eszközben: pipás doboz, kapcsoló és kitöltött kör.
- Az alapul szolgáló elem valódi <input type="checkbox"> marad, így a billentyűzetes navigáció, az űrlapbeküldés és a képernyőolvasók normálisan tovább működnek.
- Állítható méret és kiemelőszín, amely közvetlenül a CSS-értékekbe generálódik, nem kitöltendő változóként marad.
- Nincs szükség ikonfontra, SVG fájlra vagy képre — a pipa és a gomb egyszerű CSS keretekkel és pszeudoelemekkel van megrajzolva.
- Ingyenes, a böngésződben fut, regisztráció nélkül.
Használati útmutató
- Válassz stílust: lekerekített pipa, kapcsoló vagy kitöltött kör.
- Húzd a méretcsúszkát a jelölőnégyzet nagyítására vagy kicsinyítésére.
- Válassz kiemelőszínt — ez lesz a bejelölt állapot háttér- és keretszíne.
- Kattints a jelölőnégyzetre az előnézeti panelen, hogy megerősítsd, mind a bejelölt, mind a nem bejelölt állapot jól néz ki.
- Másold be a generált CSS-t a stíluslapodba, és használd bármely, az előnézet jelölésével megegyező módon becsomagolt <input type="checkbox">-on.
Példa
Bemenet
Stílus: lekerekített pipa · Méret: 24px · Szín: narancssárgaKimenet
.css-checkbox .mark {
width: 24px;
height: 24px;
border: 2px solid #f97316;
border-radius: 5px;
}
.css-checkbox input:checked + .mark {
background: #f97316;
}A jelölőnégyzet input vizuálisan el van rejtve; a látható doboz egy testvér <span>, amely az input :checked állapota alapján van stílusozva, egy kis elforgatott kerettel, amely bejelöléskor pipaként jelenik meg.
Miért rejtsd el a natív jelölőnégyzetet, ahelyett hogy eltávolítanád
Csábító lehet kihagyni a valódi <input>-ot, és a jelölőnégyzetet pusztán egy stílusozott <div>-ből és egy kattintáskezelőből felépíteni, de ezzel ingyen elveszíted a billentyűzetes támogatást, az űrlapbeküldést és a képernyőolvasó-szemantikát. Az ezen eszköz által generált minta megtartja a valódi jelölőnégyzet inputot a jelölésben — csak vizuálisan elrejtve, opacity: 0 értékkel és átpozícionálva —, így a böngésző továbbra is valódi jelölőnégyzetként kezeli minden lényeges szempontból, miközben egy testvérelem gondoskodik a látható stílusról.
A három stílus egy pillantásra
- Lekerekített pipa: egy jól ismert négyzet-pipa minta, leggyakoribb űrlapmezőkhöz, elfogadási jelölőnégyzetekhez és többválasztós listákhoz.
- Kapcsoló: azonnali be/ki beállításként olvasható inkább, mint egy űrlapmező — legjobban preferenciákhoz és beállítási képernyőkhöz illik, nem jelölőnégyzet-listákhoz.
- Kitöltött kör: egy minimalista, rádiógomb-szerű megjelenés, hasznos, ha egy négyzet doboz vizuálisan túl nehéznek hatna a közeli lekerekített UI-elemekhez képest.
Igazítás a felhasználói felület többi részéhez
A generált kiemelőszín csak a bejelölt állapotot érinti — válaszd a márkád vagy gombjaid színét, hogy a jelölőnégyzet konzisztensnek hasson az oldal többi részével. Párosítsd ugyanazzal a border-radius értékkel, amelyet a felület más részein is használsz, egy egységesebb megjelenésért.
Gyakori kérdések
Akadálymentes marad a stílusozott jelölőnégyzet?
Igen — az alapul szolgáló elem egy valódi <input type="checkbox">, amely csak vizuálisan el van rejtve, nem eltávolítva. Továbbra is fókuszt kap, reagál a billentyűzetes bevitelre (szóköz a bekapcsoláshoz), és a képernyőolvasók helyesen bemondják, mivel az asszisztív technológia az input elemet olvassa, nem a mellette lévő stílusozott span-t.
Miért használ a CSS testvérszelektort, mint az input:checked + .mark?
Mivel a látható doboz különálló elem a tényleges jelölőnégyzet inputtól, a CSS-nek szüksége van egy módra, hogy ezt a testvérelemet az input állapota alapján stílusozza. A + kombinátor a bejelölt input közvetlenül utána következő elemét választja ki, ami a szabványos technika egyedi jelölőnégyzet- és rádiógomb-stílusok felépítéséhez JavaScript nélkül.
Használhatom ezt egy valódi űrlapon, nem csak demóban?
Igen — másold ki a generált CSS-t, és csomagold be egy valódi űrlap jelölőnégyzet inputját ugyanabba a jelölésszerkezetbe, amelyet a HTML/előnézet mutat. Mivel továbbra is natív jelölőnégyzet, pontosan úgy küldi be az űrlappal, mint egy stílusozatlan verzió, és működik a meglévő űrlap-validációs logikával is.
Miért animált a pipa a lekerekített stílusnál?
Egy rövid, nagyítva megjelenő animáció a pipán tudatosabbá és reszponzívabbá teszi a bejelölt állapotot, mint egy azonnali megjelenés/eltűnés, ami gyakori minta a kidolgozott UI jelölőnégyzeteknél. Ez egy kis CSS keyframes szabály, amely a generált kód többi részével együtt szerepel.
Más HTML-t igényel a kapcsoló stílus?
Nem — mindhárom stílus ugyanazt az alapul szolgáló jelölést használja (egy elrejtett jelölőnégyzet input plusz egy testvérelem a látható formához). Ha ebben az eszközben stílust váltasz, csak az ugyanarra a szerkezetre alkalmazott CSS-szabályok változnak, így később a HTML módosítása nélkül cserélhetsz stílust.