Using a background-image for checkbox

Question

I'm trying to setup some checkboxes so that when not checked they use one image that I've got and then when checked they used another image. Here's my current checkboxes:

<input type="checkbox" name="fordCheckBox" value="Ford">

I'm also using the following CSS in order to set the background image for each checkbox.

input[type=checkbox][name=fordCheckBox] {
        background:url("https://pbs.twimg.com/profile_images/550291079719698432/LbybHjIh.jpeg") no-repeat;
        height: 25px;
        width: 25px;
        background-size: 50%;
    }

    input[type=checkbox][name=fordCheckBox]:checked {
        background:url("http://contentservice.mc.reyrey.net/image_v1.0.0/2267461") no-repeat;
        height: 25px;
        width: 25px;
        background-size: 50%;
    }

As you can see in my JSFiddle example the icons is the correct size but it's never setting the background image like it should be. Any suggestions?

Answer 1

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/