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

Co je tento nástroj?

Výchozí zaškrtávací pole prohlížeče vypadají v každém prohlížeči jinak a je těžké je přímo přestylovat, protože jejich vestavěný vzhled kreslí operační systém, ne obyčejné CSS. Standardním řešením je vizuálně skrýt nativní zaškrtávací pole a místo něj stylovat sousední element, řízený stavem :checked zaškrtávacího pole — vstup zůstává plně funkční a přístupný, mění se jen jeho vzhled.

Tento nástroj sestaví tento vzor pro tři běžné styly zaškrtávacích políček: zaoblený box s animovanou fajfkou, přepínač ve stylu iOS a vyplněný kruh (podobný přepínači). Klikněte na zaškrtávací pole v náhledu, abyste viděli zaškrtnutý stav, upravte velikost a barvu akcentu, poté zkopírujte CSS.

Zdroj: Selectors Level 4, W3C — specifikace definující pseudo-třídu :checked, na které tato technika staví.

Proč ho používat?

• Živý, klikatelný náhled — přepněte zaškrtávací pole, abyste přesně viděli, jak vypadá zaškrtnutý a nezaškrtnutý stav.
• Tři odlišné, běžně používané styly v jednom nástroji: box s fajfkou, přepínač a vyplněný kruh.
• Podkladový element zůstává skutečným <input type="checkbox">, takže navigace klávesnicí, odesílání formulářů a čtečky obrazovky fungují normálně.
• Upravitelná velikost a barva akcentu, generovaná přímo do hodnot CSS místo toho, aby zůstaly proměnnými k doplnění.
• Není potřeba žádný ikonový font, SVG soubor ani obrázek — fajfka a kolečko jsou nakresleny pomocí obyčejných CSS okrajů a pseudo-elementů.
• Zdarma, běží ve vašem prohlížeči, bez registrace.

Jak se používá

1. Vyberte styl: zaoblená fajfka, přepínač nebo vyplněný kruh.
2. Přetáhněte posuvník velikosti, abyste zaškrtávací pole zvětšili nebo zmenšili.
3. Vyberte barvu akcentu — ta se stane barvou pozadí a okraje ve stavu zaškrtnuto.
4. Klikněte na zaškrtávací pole v náhledovém panelu, abyste potvrdili, že zaškrtnutý i nezaškrtnutý stav vypadají dobře.
5. Zkopírujte vygenerované CSS do stylopisu a použijte ho na libovolný <input type="checkbox"> zabalený stejným způsobem jako náhledové markup.

Příklad

Vstup

Styl: zaoblená fajfka · Velikost: 24px · Barva: 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ávacího pole je vizuálně skrytý; viditelný box je sourozenecký <span> stylovaný podle stavu :checked vstupu, s malým otočeným okrajem vykresleným jako fajfka po zaškrtnutí.

Proč skrýt nativní zaškrtávací pole místo jeho odstranění

Je lákavé přeskočit skutečný <input> a postavit zaškrtávací pole čistě ze stylovaného <div> s obslužnou funkcí kliknutí, ale tím se ztrácí podpora klávesnice, odesílání formulářů a sémantika pro čtečky obrazovky zadarmo. Vzor, který tento nástroj generuje, ponechává skutečný vstup zaškrtávacího pole v markupu — jen vizuálně skrytý pomocí opacity: 0 a přesunutý — takže ho prohlížeč pořád považuje za skutečné zaškrtávací pole ve všech ohledech, které jsou důležité, zatímco sourozenecký element řeší viditelný styling.

Tři styly na první pohled

• Zaoblená fajfka: známý vzor čtverečku s fajfkou, nejběžnější pro formulářová pole, zaškrtávací pole souhlasu a víceoborové seznamy.
• Přepínač: čte se jako okamžité nastavení zapnuto/vypnuto místo formulářového pole — nejlepší pro nastavení a obrazovky preferencí, ne pro seznamy zaškrtávacích polí.
• Vyplněný kruh: minimalistický vzhled podobný přepínacímu tlačítku, užitečný, když by čtverečkový box vizuálně příliš zatěžoval sousední zaoblené UI prvky.

Sladění se zbytkem vašeho UI

Vygenerovaná barva akcentu ovlivňuje pouze zaškrtnutý stav — vyberte cokoli, co je vaše značková nebo tlačítková barva, aby zaškrtávací pole působilo konzistentně se zbytkem stránky. Spárujte ji se stejným border-radius, který je použitý jinde v rozhraní, pro soudržnější vzhled.

→ Generátor border-radius · Výběr barvy

Časté dotazy