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.


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.