Skip to content

Instantly share code, notes, and snippets.

@nmsdvid
Created January 29, 2014 09:05
Show Gist options
  • Save nmsdvid/8684217 to your computer and use it in GitHub Desktop.
Save nmsdvid/8684217 to your computer and use it in GitHub Desktop.
Style Checkbox with CSS
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label span {
display:inline-block;
width:21px;
height:21px;
background:url(check.png);
margin:0 6px 0 0;
}
input[type="checkbox"]:checked + label span {
background:url(check.png) 0px -31px;
}
input[type="checkbox"]:disabled + label span {
background:url(check_disabled.png);
}
/*
STYLE FOR IE8
THE CODE ABOVE IS NOT WORKING IN IE8 A BELOW
*/
<!--[if lt IE 9]>
input[type="checkbox"] {
display:block;
}
<![endif]-->
<!-- You need to use this markup if you want to use the snippet -->
<input type="checkbox" checked="checked" id="c1" disabled="disabled" /><label for="c1"><span></span>Label text here</label>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment