Generátor CSS zaškrtávacích políčok

Čo je tento nástroj?

Predvolené zaškrtávacie políčka prehliadača vyzerajú v každom prehliadači inak a je ťažké ich priamo prestylizovať, pretože ich vstavaný vzhľad kreslí operačný systém, nie čisté CSS. Štandardným riešením je vizuálne skryť natívne políčko a namiesto toho štylizovať susedný prvok, riadený stavom :checked políčka — vstup zostáva plne funkčný a prístupný, mení sa len jeho vzhľad.

Tento nástroj zostavuje tento vzor pre tri bežné štýly zaškrtávacích políčok: zaoblený box s animovanou fajočkou, posuvný prepínač v štýle iOS a vyplnený kruh (podobný radio buttonu). Kliknutím na zaškrtávacie políčko v náhľade zobrazíte zaškrtnutý stav, upravte veľkosť a farbu a skopírujte CSS.

Zdroj: Selectors Level 4, W3C — špecifikácia definujúca pseudo-triedu :checked, na ktorej je táto technika založená.

Prečo ho používať?

• Živý, klikateľný náhľad — prepnite zaškrtávacie políčko a zistite presne, ako vyzerá zaškrtnutý aj nezaškrtnutý stav.
• Tri odlišné, bežne používané štýly v jednom nástroji: box s fajočkou, prepínač a vyplnený kruh.
• Základný prvok zostáva skutočným <input type="checkbox">, takže klávesová navigácia, odosielanie formulára a čítačky obrazovky fungujú normálne ďalej.
• Nastaviteľná veľkosť a farba, generované priamo do hodnôt CSS namiesto premenných na dodatočné vyplnenie.
• Nie je potrebný ikonový font, súbor SVG ani obrázok — fajočka a bodka prepínača sú nakreslené obyčajnými CSS okrajmi a pseudo-elementmi.
• Zadarmo, beží vo vašom prehliadači, bez registrácie.

Ako sa používa

1. Vyberte štýl: zaoblená fajočka, prepínač alebo vyplnený kruh.
2. Potiahnutím posuvníka veľkosti zväčšite alebo zmenšite zaškrtávacie políčko.
3. Vyberte farbu — tá sa stane farbou pozadia a okraja v zaškrtnutom stave.
4. Kliknite na zaškrtávacie políčko v paneli náhľadu, aby ste potvrdili, že zaškrtnutý aj nezaškrtnutý stav vyzerajú správne.
5. Skopírujte vygenerované CSS do svojho štýlopisu a použite ho na akýkoľvek <input type="checkbox"> obalený rovnakým spôsobom ako náhľadové markup.

Príklad

Vstup

Štýl: zaoblená fajočka · Veľkosť: 24px · Farba: oranžová

Výstup

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

Vstup zaškrtávacieho políčka je vizuálne skrytý; viditeľný box je susedný <span> štylizovaný podľa stavu :checked vstupu, s malým otočeným okrajom nakresleným ako fajočka po zaškrtnutí.

Prečo skryť natívne políčko namiesto jeho odstránenia

Je lákavé preskočiť skutočný <input> a vytvoriť zaškrtávacie políčko výlučne zo štylizovaného <div> s obslužnou funkciou kliknutia, ale tým sa zadarmo stratí podpora klávesnice, odosielanie formulára a sémantika pre čítačky obrazovky. Vzor, ktorý tento nástroj generuje, ponecháva skutočný vstup zaškrtávacieho políčka v markupe — len vizuálne skrytý pomocou opacity: 0 a preumiestnený — takže prehliadač ho stále v každom dôležitom ohľade považuje za skutočné zaškrtávacie políčko, zatiaľ čo susedný prvok sa stará o viditeľnú štylizáciu.

Tri štýly v prehľade

• Zaoblená fajočka: dobre známy vzor štvorca s fajočkou, najbežnejší pre polia formulárov, súhlasy a zoznamy s viacnásobným výberom.
• Prepínač: pôsobí ako okamžité nastavenie zapnuté/vypnuté skôr než ako pole formulára — najlepší pre obrazovky s preferenciami a nastaveniami, nie pre zoznamy zaškrtávacích políčok.
• Vyplnený kruh: minimalistický vzhľad podobný radio buttonu, užitočný keď by štvorcový box pôsobil vizuálne ťažko vedľa okolitých zaoblených prvkov rozhrania.

Prispôsobenie zvyšku vášho rozhrania

Generovaná farba ovplyvňuje len zaškrtnutý stav — vyberte takú, akú má vaša značka alebo tlačidlá, aby zaškrtávacie políčko pôsobilo konzistentne so zvyškom stránky. Skombinujte ju s rovnakým border-radius, aký sa používa inde v rozhraní, pre súdržnejší vzhľad.

→ Generátor border-radius · Výber farby

Časté otázky