CSS 复选框图像不起作用

Question

我用这段代码在 MVC 中有 Razor View :

<td>
    @Html.CheckBoxFor(m=>m[i].checkExport)
</td>

我想改变复选框的背景，所以我写了这段代码

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]+label {    
    background: url('images/delete.png') no-repeat;
    height:17px;
}

input[type="checkbox"]:checked + label {    
    background: url('images/delete.png') no-repeat;
    height:17px;
}

但是当我运行它时它什么也没显示。我该如何解决这个问题？

Answer 1

您的 CSS 暗示存在标签紧接相关输入。

如果 label 不存在，则不会显示任何内容，因为您已经告诉 input 不显示。

通常的结构如下:

<input id="chk" type="checkbox" />
<label for="chk"></label>

注意:input 和关联的 label 由 id/for 连接链接。这对于确保单击 label 激活关联的 input 至关重要。

然后您的 CSS 会相应地应用。

input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]+label {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url(http://icons.iconarchive.com/icons/visualpharm/must-have/16/Delete-icon.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
input[type="checkbox"]:checked + label {
    background-image: url(http://www.fatcow.com/images/icons/tick.png);
}

下面的演示:

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]+label {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url(http://icons.iconarchive.com/icons/visualpharm/must-have/16/Delete-icon.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
input[type="checkbox"]:checked + label {
  background-image: url(http://www.fatcow.com/images/icons/tick.png);
}

<input id="chk" type="checkbox" />
<label for="chk"></label>

<input id="chk2" type="checkbox" />
<label for="chk2"></label>