Styling checkboxes - the CSS-only way (styling form fields - part 2)

In part 2 of my series of styling form fields using only CSS, we look at checkboxes. The approach and elements will be very similar to how we styled radio buttons - again we'll be hiding the actual form element and focus on styling the label and adding some pseudo elements to achieve the desired effect …

As ever, we start with some basic markup …

Checkboxes

As per my previous, we hide the checkboxes and use the fields' label and some pseudo elements for the actual styling …

… then we set up the empty checkbox container with a pseudo element …

… next we add the tick marks for selected boxes - you can use unicode characters for this (✓ or ✔), use an icon font or use another pseudo element/empty box with borders on 2 sides and transform it like I did …

… and don't forget to set up disabled styles …

That's it - we're done!

As ever - comments are open … have your say, ask some questions, always play nice.