Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Styled checkboxes with pure CSS
<!DOCTYPE html>
Styled checkboxes with pure CSS (almost)
The idea is that using the `:before` pseudo-class allows us to define the checkbox style in pure CSS, using the 'content' attribute to define the check symbol used and the `:checked` pseudo-selector to switch it. `:before` has to be on the subsequent element so that we can select it properly (you can't define `:before` for <input> elements).
IE 8 doesn't support `:checked` so we switch a class on it using jQuery and IE 6 & 7 don't support `:before` so we add a <span> to do its job.
*** IE fallbacks currently don't work! Feel free to suggest fixes :-) ***
<!--[if lt IE 8]> <html class="lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<meta charset="utf-8">
.styled-checkbox {
opacity: 0;
filter: alpha(opacity=0);
.styled-checkbox + label {
position: relative;
.styled-checkbox + label:before,
.lt-ie8 .checkbox-replacement {
content: '';
display: inline-block;
visibility: visible;
left: 0;
width: 0.6em;
height: 0.6em;
margin: 0 0.3em 0 -1em;
line-height: 0.6;
text-align: center;
/* Put checkbox styles here: */
border: 1px solid #999;
.styled-checkbox:checked + label:before,
.lt-ie9 .styled-checkbox.checked + label:before {
content: '';
<script src="">
<form action="" method="GET">
<input class="styled-checkbox" type="checkbox" id="chk" name="chk" value="1" /><label for="chk">Tick me</label>
<input type="submit" value="Submit" />
<!--[if lt IE 9]><script>
// JS for IE support
// [Remove this if you're not supporting IE 8 and below]
$(function() {
// IE 8 doesn't support :checked, so give it the 'checked' class for our
// styles to work
$('.lt-ie9 .styled-checkbox').click(function() {
var $this = $(this);
if($':checked')) {
else {
// IE 6 & 7 don't support `:before`, so manually add a span with the same
// styling and update the content on change
// [Remove this if you're not supporting IE 6 & 7]
$('.lt-ie8 .styled-checkbox').each(function() {
$(this).before('<span class="checkbox-replacement"></span>');
$('.lt-ie8 .styled-checkbox').click(function() {
var $this = $(this);
if($':checked')) {
else {
// Trigger now to set initial state
$('.lt-ie9 form .styled-checkbox').change();

exside commented Jul 20, 2014

what I do for IE <= 8 is just to show the normal checkbox, e.g. make it opacity: 1; again =)

It does not work in IE8.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment