如何使用图像制作自定义复选框？ [复制]答案

【问题标题】：How to make a custom checkbox with image? [duplicate]如何使用图像制作自定义复选框？ [复制]
【发布时间】：2019-11-26 17:05:37
【问题描述】：

我需要创建一个带有图像的复选框，而不是常规的复选标记。它应该看起来像这样，[打勾]：

[未勾选]：

这里是元素的代码：

.modal-options label {
  color: #f62b3e;
  font-family: sharp-20-regular;
  font-size: 17px;
  text-align: center;
  user-select: none;
  cursor: pointer;
  position: relative;
  padding-left: 5%;
  margin-bottom: 12px;
}

.modal-options input {
  width: 100%;
  cursor: pointer;
  height: 40px;
  width: 40px;
  background-color: transparent;
  border: 1px solid #f62b3e;
}

.modal-options input:checked {
  background-position: right center;
}

.checkmark {
  background-image: url(assets/images/checkbox-smile.svg);
  background-position: left center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  height: 25px;
  width: 25px;
}

      

  <label>
       <input type="checkbox" />
       <span class="checkmark"></span>
       <br />
       Just curious
</label>

这是我目前拥有的：

【问题讨论】：

Try this 链接，很有帮助
@justDan 是的！特别是这个答案：stackoverflow.com/a/13953070/9136921

标签： javascript html css frontend

【解决方案1】：

您可以创建一个<div> 并将复选框放在该<div> 中。

然后首先使用背景属性在这个父div 中设置一个图像为background，填充整个元素。然后，将复选框变大作为父元素，然后将checkbox的不透明度更改为0。

如果您做对了，一旦用户点击图片，复选框也会被点击。

【讨论】：