When it comes to styling HTML checkboxes, our options are somewhat limited to the way browsers (and OS) render them and we may have to rely on bloated JS plugins to make things work across the board. That’s the old-school stuff. With CSS3 and some clever pseudo elements usage, you can create almost any kinds of fancy custom checkboxes as demonstrated by webdesigncrowd. In this demo, the HTML checkbox is hidden from view and all stylings are applied on the <label>
taking advantage of its :before
and :after
pseudo elements to emulate a checkbox appearance with fancy transitions. Click here to view a similar demo.
comment 0