Thursday, May 30, 2013

Custom Checkbox and Radio Buttons with Icon Fonts

There are lots of tutorials on how you create your own custom radio buttons and checkboxes with pure CSS. But I haven't seen one that combines the :checked technique AND the use of icon fonts so I thought I should write a little something something on the subject. I'll assume that you already know how much more awesome an icon font is compared to an image or a sprite. A couple of reasons: they scale, they're Retina Ready and it just take a second to change their color or size. It's a long list, trust me!

Convinced? Good! Now the first thing you need to do is create your own custom font. Over at icomoon.io they have a really nice app for this. When you have generated your font, grab the font-face rule that came together with your icon font.

Then in your CSS file you set inputs to display:none, they're ugly as hell remember? Then we'll use the pseudo-element :before on our labels like so:

input[type='checkbox'] + label:before,
input[type='radio'] + label:before {
font-family: 'icomoon';
}

input[type="radio"] + label:before {
  content: "\e003"; /* Radio Button Unchecked */
}

input[type="radio"]:checked + label:before {
  content: "\e002"; /* Radio Button Checked */
}

input[type="checkbox"] + label:before {
  content: "\e000"; /* Checkbox Unchecked */
}

input[type="checkbox"]:checked + label:before {
  content: "\e001"; /* Checkbox Checked */
}

Then in the mark-up you write standard html, no rabbit-in-a-hat-tricks!

And there you go! Check out a demo here. This works from IE8 and up, if you need deeper browser support I'd check out Selectivizr. Thank you for reading, hope I helped!