Question

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

网址正确，我可以在浏览器中打开图片。我尝试过给标签而不是其中的跨度背景属性，但这有相同的结果。在Google Chrome中的检查器中，新的背景属性也处于活动状态＆＃39; （而旧的＆＃39;划掉了'＃39;）所以我无法理解为什么它会继续显示旧的。

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

Answer 1

你有一个错字

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

查看input前面的句号/句号？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

但是，问题中的代码会在CSS中显示未经检查的错误，即input前面的无关点。如果我删除它，它会正常工作。

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

＆＃13;

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=✔");
}

＆＃13;

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

＆＃13;

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

2 个答案: