A lot of times, we need to style the input fields to make them look fancy. It’s possible to do it with images, but what if we want to take it to another level and style a checkbox with icon font…

As you know, icon font works as pseudo elements (:before and :after), which can only be applied to nested elements (div, span, p, label). CSS pseudo elements can’t be used with inputs, but fear now – there is a way. Use labels and visibility hidden in checkbox. See the codepen below (I’m using font-awesome here)

See the Pen zkqva by Alex Bachuk (@abachuk) on CodePen.

The post Custom checkbox with CSS3 appeared first on Alex Bachuk.

Source: Alex Bachuk