is it possible put image in input type="check box"?

Question

i want to put an image on the background of check box & radio box in my html code but it's not work but it's work on other form property.

Answer 1

I found the way how give image to checkbox & radio button with pure css.

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;
}

Check this for more http://css-tricks.com/the-checkbox-hack/ ,

https://gist.github.com/592332

Answer 2

I write my own code to fix this issue. This will work like this. I didn't have this code now but I write same way here on SO.

<div class="checkbox-wrapper">
<input type="checkbox" name="value"/>
<img src="img/blah.png"/>
</div>

In css we will hide this checkbox by make it's Z-index less then the image that I put inside this wrapper code. Eventwise when someone click on image it's look like checkbox and in real checkbox will be clicked. instead of display:none using opacity:0 will be better. This will break in IE6 but we didn't care about that because I am not supporting IE6 anymore.

In Javascript You can write event if you want a different (but similar to mine) implementation. You can replace native Html Checkbox,Radio and select (select2 is better if you stick with Twitter bootstrap) with your own themes based controls.