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

【问题标题】：Custom checkbox only works with background color, not image自定义复选框仅适用于背景颜色，不适用于图像
【发布时间】：2015-10-26 11:36:22
【问题描述】：

我想在网站上使用自定义复选框，所以对于初学者，我使用了一个自定义背景颜色的跨度，一旦检查，我就更改了 CSS 中的背景颜色，效果很好，背景颜色单击复选框时更改。但是，一旦我用图像背景 url 替换颜色值，它会在初始状态下显示背景图像，但在检查值后不会更改背景图像。复选框会短暂闪烁，但随后会继续显示原始背景图像。

网址正确，我可以在浏览器中打开图片。我尝试通过为标签而不是其中的跨度提供背景属性，但这具有相同的结果。在谷歌浏览器的检查器中，新的背景属性也是“活动的”（旧的被“划掉”），所以我不明白为什么它继续显示旧的。

HTML：

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

CSS：

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: url("../../static/img/checkbox1.jpg");
cursor:pointer; 
}


input[type="checkbox"]:checked + label span {
background: url("../../static/img/checkbox2.jpg");
}

编辑：修正错字。这是只有背景颜色的代码，它可以按您的预期工作，一旦单击颜色变为绿色，您再次单击它会变为蓝色。 CSS：

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

【问题讨论】：

您能否也展示一段有效的代码（使用背景颜色而不是图像），以便我们比较笔记？
我刚刚在第一篇文章中添加了这个！基本上它只是用颜色替换的 url（用于测试），这很奇怪。

标签： html css checkbox

【解决方案1】：

你有错别字

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

看到input前面的句号/句号了吗？

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-image: url(http://lorempixel.com/output/abstract-q-c-30-30-4.jpg);
  cursor: pointer;
}
input[type="checkbox"]:checked + label span {
  background: url(http://lorempixel.com/output/people-q-c-30-30-3.jpg);
}

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

【讨论】：

【解决方案2】：

您问题中的文字听起来像是您不小心双击了。但是复选框没有双击事件，因此您只需单击两次，第二次取消选中复选框。

但是，您问题中的代码在未选中的 CSS 中显示了一个错误，即 input 前面有一个无关的点。如果我删除它，它会正常工作。

（请注意，我需要用通用的东西替换图像。）

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: url("http://dummyimage.com/30/FF0/000.png&text=%20");
  cursor: pointer;
}
input[type="checkbox"]:checked + label span {
  background: url("http://dummyimage.com/30/FF0/000.png&text=✔");
}

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

【讨论】：

啊，重点是因为我删除了之前的一些类，以便更清楚地在此处发布（因为它们是特定于项目的类），对不起。在代码中，名称实际上是正确的。我认为您可能对双击是正确的，有时当我单击复选框时，它旁边的跨度会被“选中”。我仍然不明白为什么它确实适用于背景颜色（如果我点击它，它只会将一次更改为另一种颜色）但不适用于图像..
Hmmmm... 加载图片很慢，所以您不会立即注意到点击有任何作用，然后您会自动再次点击？
不，我肯定只单击一次，然后等待相当长的时间，但仍然没有更改图像。如果选中此复选框，则（故意）另一个字段被禁用我绝对知道我只点击了一次，只有当我再次点击时，该字段才会再次启用。但是因为它有时（并非总是）选择它旁边的标签文本，所以对我来说感觉很随机，我想你可能对某种双击事件有所了解..
但是您仍然有问题，仅在您的网站上还是在此处答案中的 sn-ps 中？