javascript - 如何在点击图像上打勾

我可以为它创建代码，但复选框不会出现在图像上方。它有点移位，我该怎么修？

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  border: 2px solid #7e8a94;
  float: right;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-checkbox:hover span,
.custom-checkbox input:checked + span {
  border: 3px solid #43D8B0;
}

.custom-checkbox input:checked + span:before {
  content: "✔";
} 

 <label class="custom-checkbox">

 <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
  <input type="checkbox">
  <span></span>
</label>

我希望复选框出现在左上方，
这边：http://prntscr.com/j960yk
谢谢你的时间。

最佳答案

在CSS规则中添加了float: left;，添加了.custom-checkbox span标记并修改了HTML。

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  border: 2px solid #7e8a94;
  /* float: right; - you don't need that. Use float: left; */
  float: left;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-checkbox:hover span,
.custom-checkbox input:checked+span {
  border: 3px solid #43D8B0;
}

.custom-checkbox input:checked+span:before {
  content: "✔";
}

<label class="custom-checkbox">
 <input type="checkbox">
  <span></span>
  <br>
  <br>
 <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
</label>

关于javascript - 如何在点击图像上打勾，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49989131/