image Checkbox Replacement for Forms

Some sites like to be a bit tricky and have some complicated form checkbox replacement which is not all that hard, just can be a bit annoying as you have to extract the images for this to work.

Demo Code: http://jsfiddle.net/4huzr/ 

View CodePad Test Code for image Checkbox Replacement for Forms

HTML

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>

CSS

input[type=checkbox] {
display:none;
}
 
input[type=checkbox] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}

Demo

Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹