Generator checkboxa CSS

Czym jest to narzędzie?

Domyślne checkboxy przeglądarki wyglądają inaczej w każdej przeglądarce i trudno je bezpośrednio stylizować, ponieważ ich wygląd rysuje system operacyjny, a nie zwykły CSS. Standardowym obejściem jest wizualne ukrycie natywnego checkboxa i stylizowanie zamiast niego elementu siostrzanego, sterowanego stanem :checked checkboxa — sam input pozostaje w pełni funkcjonalny i dostępny, zmienia się tylko wygląd.

To narzędzie buduje ten wzorzec dla trzech popularnych stylów: zaokrąglonego kwadratu z animowanym haczykiem, przełącznika suwakowego w stylu iOS oraz wypełnionego kółka (przypominającego przycisk radiowy). Kliknij checkbox w podglądzie, aby zobaczyć stan zaznaczony, dostosuj rozmiar i kolor akcentu, a następnie skopiuj CSS.

Źródło: Selectors Level 4, W3C — specyfikacja definiująca pseudoklasę :checked, na której opiera się ta technika.

Dlaczego warto go używać?

• Podgląd na żywo, klikalny — przełącz checkbox, aby zobaczyć dokładnie, jak wygląda stan zaznaczony i niezaznaczony.
• Trzy różne, powszechnie używane style w jednym narzędziu: kwadrat z haczykiem, przełącznik i wypełnione kółko.
• Element bazowy pozostaje prawdziwym <input type="checkbox">, więc nawigacja klawiaturą, wysyłanie formularza i czytniki ekranu nadal działają normalnie.
• Regulowany rozmiar i kolor akcentu generowane bezpośrednio w wartościach CSS, a nie pozostawione jako zmienne do uzupełnienia.
• Nie potrzeba czcionki ikon, pliku SVG ani obrazka — haczyk i suwak są rysowane zwykłymi obramowaniami CSS i pseudoelementami.
• Za darmo, działa w przeglądarce, bez rejestracji.

Jak używać

1. Wybierz styl: zaokrąglony haczyk, przełącznik suwakowy lub wypełnione kółko.
2. Przeciągnij suwak rozmiaru, aby powiększyć lub zmniejszyć checkbox.
3. Wybierz kolor akcentu — stanie się kolorem tła i obramowania stanu zaznaczonego.
4. Kliknij checkbox w panelu podglądu, aby potwierdzić, że oba stany — zaznaczony i niezaznaczony — wyglądają dobrze.
5. Skopiuj wygenerowany CSS do arkusza stylów i użyj go na dowolnym <input type="checkbox"> owiniętym taką samą strukturą jak w znaczniku podglądu.

Przykład

Wejście

Styl: zaokrąglony haczyk · Rozmiar: 24px · Kolor: pomarańczowy

Wynik

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

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

Input checkboxa jest wizualnie ukryty; widoczny kwadrat to siostrzany <span> stylizowany na podstawie stanu :checked inputu, z małym obróconym obramowaniem rysowanym jako haczyk po zaznaczeniu.

Dlaczego ukrywać natywny checkbox, a nie go usuwać

Kuszące jest pominięcie prawdziwego <input> i zbudowanie checkboxa tylko ze stylizowanego <div> z obsługą kliknięcia, ale w ten sposób tracimy za darmo wsparcie klawiatury, wysyłanie formularza i semantykę dla czytników ekranu. Wzorzec generowany przez to narzędzie zachowuje prawdziwy input checkboxa w znaczniku — po prostu ukryty wizualnie za pomocą opacity: 0 i przepozycjonowany — dzięki czemu przeglądarka nadal traktuje go jako prawdziwy checkbox we wszystkim, co ważne, a widocznym stylem zajmuje się element siostrzany.

Trzy style w skrócie

• Zaokrąglony haczyk: znajomy wzorzec kwadratu z haczykiem, najczęściej spotykany w polach formularzy, checkboxach akceptacji regulaminu i listach wielokrotnego wyboru.
• Przełącznik suwakowy: odbierany bardziej jako natychmiastowe ustawienie wł./wył. niż pole formularza — lepiej pasuje do ekranów preferencji niż do list checkboxów.
• Wypełnione kółko: minimalistyczny wygląd, przypominający przycisk radiowy, przydatny, gdy kwadratowy kwadracik wyglądałby wizualnie ciężko obok zaokrąglonych elementów interfejsu.

Dopasowanie do reszty interfejsu

Wygenerowany kolor akcentu wpływa tylko na stan zaznaczony — wybierz kolor swojej marki lub przycisków, aby checkbox pasował do reszty strony. Połącz go z tym samym border-radius używanym gdzie indziej w interfejsie dla bardziej spójnego wyglądu.

→ Generator promienia krawędzi · Próbnik kolorów

Najczęściej zadawane pytania