Html 自定义复选框仅适用于背景色，不适用于图像

我想在网站上使用自定义复选框，所以对于初学者来说，我使用了一个跨度，我给了一个自定义背景色，一旦选中，我就在CSS中更改了背景色，这很好，当点击复选框时背景色会改变。但是，一旦我将颜色值替换为图像背景url，它将在初始状态下显示背景图像，但在选中该值后不会更改背景图像。复选框会闪烁一小段时间，但随后会继续显示原始背景图像

URL是正确的，我可以在浏览器中打开图像。我尝试过给标签而不是其中的跨度赋予背景属性，但结果是一样的。在Google Chrome中的inspector中，新的背景属性也是“活动的”（旧的属性被“划掉”），所以我不明白为什么它继续显示旧的属性

HTML：

<input type="checkbox" id="unlimited" name="unlimited" value="unlimited" />
<label for="unlimited"><span></span>Unlimited amount</label>

编辑：固定打字错误。下面是只使用背景色的代码，正如您所期望的那样，单击后颜色变为绿色，再次单击后颜色变为蓝色。 CSS:

你有打字错误

.input[type="checkbox"] + label span 

请参见

输入前面的句号/句点

input[type=“checkbox”]{
显示：无；
}
输入[type=“checkbox”]+标签>范围{
显示：内联块；
宽度：30px；
高度：30px；
保证金：-1px4p0；
垂直对齐：中间对齐；
背景图片：url(http://lorempixel.com/output/abstract-q-c-30-30-4.jpg);
光标：指针；
}
输入[type=“checkbox”]：选中+标记范围{
背景：url(http://lorempixel.com/output/people-q-c-30-30-3.jpg);
}

无限量

问题中的文本听起来像是你无意中双击了。但是复选框没有双击事件，因此只需单击两次，第二次取消选中复选框

但是，您问题中的代码在CSS中显示了一个错误，即

输入前面有一个无关的点。如果我去掉它，它会正常工作

（注意，我需要用一些通用的东西来替换这些图像。）


input[type=“checkbox”]{
显示：无；
}
输入[type=“checkbox”]+标签范围{
显示：内联块；
宽度：30px；
高度：30px；
保证金：-1px4p0；
垂直对齐：中间对齐；
背景：url（“http://dummyimage.com/30/FF0/000.png&text=%20");
光标：指针；
}
输入[type=“checkbox”]：选中+标记范围{
背景：url（“http://dummyimage.com/30/FF0/000.png&text=✔");
}

无限量
您是否也可以显示一段有效的代码（使用背景色而不是图像），以便我们可以比较注释？我刚刚在第一篇文章中添加了此内容！基本上它只是用颜色替换的url（用于测试），这很奇怪。啊，这一点发生了，因为我删除了它之前的一些类，以便更清楚地在这里发布（因为它们是特定于项目的类），对不起。在代码中，名称实际上是正确的。我想你可能对双击是正确的，但有时它旁边的跨度会被“选中”“当我单击复选框时，我仍然不明白为什么它与背景色一起工作（如果我单击它，它只会将一次更改为另一种颜色）但不是用图像…嗯…加载图像速度慢，所以你不会立即注意到单击做了什么，你会自动再次单击吗？不，我肯定只单击一次，然后等待相当长的时间，但仍然没有更改图像…有（故意的）如果选中此复选框，另一个字段将被禁用，这样我肯定知道我只单击了一次，只有当我再次单击该字段时，该字段才会再次被启用。但因为它有时（不总是）选择它旁边的labeltext，我觉得它是随机的，我想你可能对某种双击事件有点想法……但你仍然有问题，只是在你的网站上还是在这里的答案片段中？
input[type="checkbox"] {
display:none;
}

input[type="checkbox"] + label span {
display:inline-block;
width:30px;
height:30px;
margin:-1px 4px 0 0;
vertical-align:middle;
background: blue;
cursor:pointer; 
}


input[type="checkbox"]:checked + label span {
background: green;
}

.input[type="checkbox"] + label span