Jquery Use Image As CheckBox

Question

I am in pursuit of implementing images as checkboxes. For now I am trying out a sample. The code below contains a simple image with a submit button next to it. On clicking t

Answer 1

Actually using image as checkbox can be done with HTML & CSS ONLY!

The trick is to style a element (make it an image) and add it a for="checkboxid" parameter - then just make a with a proper id="checkboxid" and hide it. When you click on label => the checkbox gets (un)checked. Also the usage of :checked and + selector is good if you want to change label image on checked / unchecked.

HTML

CSS

input[type=checkbox].css-checkbox{ display: none; }
.css-label{
    display: inline-block;
    padding-left:20px;
    height:15px;
    background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
    background-repeat: no-repeat;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -15px;
}

Fiddle - edited/simplified: http://jsfiddle.net/bdTX2/

Example took from: http://www.csscheckbox.com/