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!
Comments
Nice work and design.
Though these really need to work with keyboard focus and tabbed navigation to be usable in a real site.
Hey, if tab focusing is an issue (which is totally understandable from a usability perspective), you can try using this solution in our last post on this topic by bergie3000 where instead of using
display: none;
, he has hidden the checkboxes off screen and then added an outline or border to the customized checkboxes when they are focused upon. Thanks!Thank you for your work Johnny.
Another similar work at: http://codepen.io/CreativeJuiz/pen/zqKtp with a flat style.
Have a nice day!
Very nice ;)
Another example here I made using SASS & Compass. No fancy design, just the basic.
https://gist.github.com/MathRivest/5413438
Very nice, but why are they called radio buttons on the demo site http://www.inserthtml.com/demos/css/radio-buttons/ when they are checkboxes? – the demo was also listed in the Webdesigner depot newsletter as Custom radio buttons with only CSS
Good question. It is due to me starting this as radio buttons and then switching to checkboxes, also tiredness.
Have to see how “assy” it looks on IE8 before I decide to use these babies or not. Although I just heard through the grapevine that Google is dropping IE8 support very soon on some of it’s products. This is good news.
Great work.
IE8 support just isn’t happening for these, but you can put a quick check in to target IE8 and less and just use regular old checkboxes. No big deal and lets users with good browsers get good features.
There’s absolutely no need to support IE8 (or any other IE for that matter) that isn’t natively capable of displaying these custom checkboxes.
Users in those browser will just get the basic checkboxes and be done with it. Usability and content accessibility are not negatively affected in any way, shape or form.
:before and :after pseudo elements are just an amazing piece of CSS.
Great tutorial, Thanks for sharing!
I agree with what you said but sometimes the differences between one and the other kind of irk me when I see them. I am going to use them though and yes, before & after I find to use them just so much. They are such a great tool for pretty much anything you might need without making too many div’s.
Thanks for this article, you wrote it at just the right time for me! Working great in many browsers.
great tutorial. tks 4 share
Thanks for the examples! Nifty and helpful.
nice 1.
I have found another beautiful example to customize html checkbox control using css, please go through the below link, I hope it will be useful.
http://www.etechpulse.com/2014/02/on-off-custom-html-checkbox-css-in.html
Thanks