In an earlier post I explored custom styling of form selects. In this article I’m going to discuss how to make custom checkboxes to match those selects. Note that the same technique can be used for radios.
The first thing I think about is structure. I want everything wrapped in a label because if a label is associated with a check or a radio it can activate the element if it receives a click anywhere on it or in it. Next comes my check or radio and then a span to hold the label message. I need that span for two reasons: The first is that I need to put CSS :before content on it, which will be my replacement graphic or “glyph”. The second is because I need an element directly after the check or radio to respond to it’s state. When the element is checked I can refer to that state in my CSS and target its adjacent sibling to change the glyph in its :before content. I’m using Font Awesome for my glyphs in this demo, but typically I make my own by importing SVGs into Fontello.com.
With this scheme you have the option of removing all the custom styling and just going with the natural elements for mobile. This saves the weight of the font download and gives preference to the device’s native implementation, which I think is a better experience for the user.