Tworzymy checkboxy: zobacz jak to zrobić w samym CSS

Tworzymy checkboxy: zobacz jak to zrobić w samym CSS

Nie wiem jak Was, ale mnie zawsze męczyło stylowanie formularzy. Natywne kontrolki bywały z natury nieprzyjazne i dlatego istniała konieczność instalowania specjalnie przygotowanych plug-in-ów, które zwykle tworzyły w kodzie straszny śmietnik. Piszę w czasie przeszłym, ponieważ znalazłem ulubiony hack na te problemy.

Podstawowy znacznik HTML jaki wykorzystamy to  <label></label>. Jako nieodłączny towarzysz formularzy, posiada wspaniałą możliwość manipulacji kontrolkami takimi jak właśnie checkbox czy radio. Wszystko sprowadza się do ustawienia jednakowych id. Wewnątrz <label></label> wystarczy umieścić niewidoczy <input type="checkbox"/> oraz pusty <span>, który okazuje się być przydatny w trakcie stylowania.

Nazywam je pseudoikonki

Do narysowania ikonek wykorzystać możemy before, after. Dwa pseudoelementy są wystarczające do stworzenia prostych znaków. Być może nie jest to najlepszy sposób, natomiast ma on jedną świetną zaletę: nie generuje requestów o pliki graficzne. Z doświadczenia wnioskuję, że takie rozwiązanie jest również mniej czasochłonne niż przygotowanie ikon w Illustratorze i animowania ich przy pomocy canvas lub svg.

Pisać więcej nie trzeba, rzuć okiem na demo i kod, a w razie pytań komentuj. Jeśli uznasz za przydatne wykorzystaj gdziekolwiek zechcesz.


Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.