使复选框透明

Question

我已经制作了一个带复选框的表单。现在我需要在图像上显示一个复选框：

实现这一目标的最佳方式是什么？

此外，单击标签后，复选框应为:checked。

HTML：

<label>
    <input id="custom-checkbox" type="checkbox" required>
    Disclaimer: Click here if you are okay...
</label>

Answer 1

就像Mr_Green所说，你可以隐藏复选框并使用标签。确保复选框后面有标签，而不是包装复选框的标签。

段

/* CheX */

input.chkrad {
  display: none;
}
input.chkrad + label {
  color: #111;
  font-size: 16px;
  background: url(http://i.imgur.com/clMMf.png) no-repeat; background-size: cover;
}
input.chkrad + label span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: -1px 4px 0 0;
  vertical-align: baseline;
  cursor: pointer;
}
input + label span {
  background: #fff;
  line-height: 100%;
}
input.X:checked + label span {
  padding: -3px 0 3px;
}
input.X:checked + label span:before {
  content: 'X';
  color: #F00;
  font-family: cursive;
  font-style: oblique;
  font-weight: 900;
}

<input type='checkbox' name='chk3' id="chk3" class="chkrad X fade" value='x' />
<label for="chk3"><span></span> Disclaimer: Click anywhere on this text if you are okay...</label>