CSS复选框图像不起作用

Question

我在MVC中使用此代码进行了razor视图：

Can't assign requested address

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

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

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

Answer 1

您的CSS意味着在{/ 1}}之后立即存在label 。

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

通常的结构如下：

input

注意：<input id="chk" type="checkbox" /> <label for="chk"></label> 和关联的input通过ID /连接进行链接。这对于确保点击label激活关联的label。

至关重要

然后你的CSS应该适用。

input

演示如下：

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