如何自定义复选框以使其看起来与附加的图像类似？

Question

如何在html表单中设置多个复选框的样式，以使复选框的外观类似于附加图像中所示？

Answer 1

您必须手动自定义input＆amp; label以某种方式使用伪元素在您想要的复选框中获得效果。

我为你构建了一个可以参考的演示，请检查以下代码：

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: -5px;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
  border-radius: 50%;
  background-color: #5cf1b3;
  outline: none;
}

[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 24px;
  line-height: 0.8;
  color: #fff;
  transition: all .2s;
}

[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

<p>
  <input type="checkbox" id="test1" />
  <label for="test1"></label>
</p>

Answer 2

这是你可以在没有javascript的情况下完成的。您可以根据需要自定义外观。

li {
  width:200px;
  list-style:none;
  position:relative;
  height: 30px;
  line-height:30px;
  margin:10px 0;
}

label{
  cursor:pointer;
  width:100%;
  float:left;
}

input[type=checkbox] {
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}

input[type=checkbox]:after {
  content: "";
  width: 30px;
  height: 30px;
  background:url("http://www.clker.com/cliparts/c/C/o/E/v/d/check-no-md.png") no-repeat;
  background-size:contain; 
  top: 0px;
  right: 0px;
  position: absolute;
  display: inline-block;
}

input[type=checkbox]:checked:after {
  content: "";
  width: 30px;
  height: 30px;
  background:url("http://www.clker.com/cliparts/u/3/i/2/t/D/check-yes-md.png") no-repeat;
  background-size:contain; 
  top: 0px;
  right: 0px;
  position: absolute;
  display: inline-block;
}

<ul>
  <li>
   <label>dededede<input name="checkbox1" type="checkbox"  /></label>
  </li>
  <li>
    <label>Checkbox1 <input name="checkbox2" type="checkbox" /></label>
  </li>  
</ul>