使用背景图像复选框

Question

我正在尝试设置一些复选框,以便在未选中时使用我已获得的一个图像,然后在检查时使用另一个图像.这是我目前的复选框:

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

我也使用以下CSS来设置每个复选框的背景图像.

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

正如您在我的JSFiddle示例中看到的那样,图标大小正确,但它永远不会像应该的那样设置背景图像.有什么建议？

Answer 1

你可以用标签来做

   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>

请检查您的更新jsfiddle https://jsfiddle.net/malithmcr/vbwgweso/