Default checkboxes are a quite plain and many web developers would like at least some ability to customize them, but unfortunately there is no direct way to do so. Luckily there is a little CSS workaround that I’ve used to create a bunch of these custom checkboxes.

The Checkboxes

You can see all the checkboxes by clicking on DEMO above. You can also download them. You can use them anywhere you want or modify them in any way you wish for any project! I’ve outlined the technique used to make them below for those of you who are interested.

The Technique

I covered this technique in an earlier post but I’ll give a quick recap. First off, lets say you have some code like this:

<input type="checkbox" id="checkbox-1" />
<label for="checkbox-1">Check?</label>

When the user clicks on the label, checkbox 1 is activated and checked. Using that little bit of information we can hide the checkbox and style the label like a checkbox. We can then use things like the :after and :before CSS pseudo selectors to add ticks or crosses, or any other supplementary UI.

We use the sibling selector to select the label immediately after the checkbox so we don’t run into any problems. A very basic example:

#checkbox-1 {
    display: none;
}

#checkbox-1 + label { 
    color: red;
}

#checkbox-1:checked + label {
    color: blue;
}

Now when the user clicks the label the label will turn from red to blue. So using this very simple technique I created a variety of checkboxes that work just like regular checkboxes, except they look a bit nicer than the default style.

Support

Support is fine, although some of these effects require 3D CSS which only got support in IE10. For that reason you might want to use Modernizr to select browsers that support 3D effects.

Doing this isn’t that hard. First, download Modernizr with CSS 3D Transforms. Then just add this little Javascript snippet to your page:

<script src="modernizr.js"></script>
<script type="text/javascript">

window.onload = function() {

	var Modernizr = window.Modernizr;
	
	if(Modernizr.csstransforms3d) { 
		
		var head = document.querySelector('head');
		
		head.innerHTML = head.innerHTML + '<link rel="stylesheet" href="inserthtml.com.radios.css" />';
		
	}
}

</script>

And there we have it. The checkboxes without 3D transforms will work in IE9 and above, and for IE8 and below you can just fall back to default checkboxes, like so:

<!--[if lte IE 8]>
<link href="ie8.css" rel="stylesheet" />
<![endif]-->

So it’s pretty safe to use those on any project. That about wraps it up, so have a great day, and see you next time!