Using a background-image for checkbox
You can just do it with label
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
display:inline-block;
padding: 0 0 0 0px;
background:url("https://pbs.twimg.com/profile_images/550291079719698432/LbybHjIh.jpeg") no-repeat;
height: 125px;
width: 125px;;
background-size: 50%;
}
input[type=checkbox]:checked + label {
background:url("http://contentservice.mc.reyrey.net/image_v1.0.0/2267461") no-repeat;
height: 125px;
width: 125px;
display:inline-block;
background-size: 50%;
}
Html
<input type="checkbox" name="fordCheckBox" id="Ford" value="Ford">
<label for="Ford"></label>
Please check updated jsfiddle https://jsfiddle.net/s4nr6q3d/
You shouldn't actually try and change the checkbox directly; some browsers will always show the default checkbox. How it is typically done is by adding a label for the checkbox that is linked to the inputs id field. For example:
<input type='checkbox' id='x' name='fordCheckBox'>
<label for='x'></label>
Then you set your checkbox to display: none
and the actual css gets applied to the label instead. Your selectors should look like this: input[type=checkbox]:checked + label
I found this article that will help explain everything and walk you through it step by step:
http://webdesign.tutsplus.com/tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953
I used this CSS. In this CSS, when checkbox is checked, it puts a tick image on the checkbox. Also it changes the size, color and border of the checkbox by default.
input[type='checkbox'] {
-webkit-appearance: none;
width: 30px;
height: 30px;
background: white;
border-radius: 5px;
border: 2px solid #555;
vertical-align:middle;
}
input[type='checkbox']:checked {
background-image: url("Images/tick-sm.png");
background-size: 90%;
background-position: right center;
background-repeat: no-repeat;
}
Replace "Images/tick-sm.png" with your own image.
If you want a different background for the un-checked state too, add the same contents of the second block to first block and replace the image.