How to Apply background image on the checkbox - css

Question

how do I apply background image on the checkbox.I know this is something which is very easy but still I am finding it difficult
here is my HTML code . I don't know what is the issue in this
<div>
<style>
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0px;
background: transparent url("http://ilexsquare.com/finalhot/wp-content/uploads/2015/12/hotlogo-2.png") repeat scroll 0% 0%;
}
</style>
<input type="checkbox" />
</div>
please Help

Answer 1

Julian Be is correct you can't apply background images directly to checkboxes.
The only way to achieve this is to spoof the result. You could do this by having a <label> wrapped around the checkbox with it's overflow set to hidden and then move the checkbox itself into the overflow. This way ensures the checkbox is still clickable but not visible to the user. You can then add a <span> after the checkbox and apply the background image to this element depending on the state of the checkbox using the :checked selector and + selector.
Something like this
/* Set overflow of label to hidden so the checkbox can disappear */
.label-with-hidden-checkbox {
overflow: hidden;
position: relative;
}
/* Move the checkbox out of view */
.label-with-hidden-checkbox .hidden-checkbox {
position: absolute;
left: -9999px;
}
/* Set the background image of the spoof checkbox to the unchecked state */
.label-with-hidden-checkbox .hidden-checkbox + .spoof-checkbox{
display: inline-block;
margin-right: 10px;
background: transparent url("unchecked-state-image.png") repeat scroll 0% 0%;
}
/* When the checkbox is checked set the background image of the spoof checkbox to the checked state */
.label-with-hidden-checkbox .hidden-checkbox:checked + .spoof-checkbox{
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
background: transparent url("checked-state-image.png") repeat scroll 0% 0%;
}
</style>
<label class="label-with-hidden-checkbox">
<input class="hidden-checkbox" type="checkbox" /><span class="spoof-checkbox"></span> This is a checkbox
</label>
</div>
Hope that helps.

Answer 2

You can Use label to apply the image here is the jsfiddle
jsfiddle
this is your HTML code:
<input type="checkbox" />
<label></label>
and CSS:
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0px;
opacity: 0;
cursor: pointer;
}
label{
height:100px;
width:100px;
}
label:before{
content:"";
width: 100px;
height: 60px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: url("http://ilexsquare.com/finalhot/wp-content/uploads/2015/12/hotlogo-2.png") repeat scroll 0% 0%;
}

Answer 3

You cannot add images to checkboxes.