自定义checkbox

浏览器自带的checkbox太丑了？怎么自己弄个好看的？

html+css

<lable class="checkbox-normal-v2">
　　<input type="checkbox" name="checkbox"><span></span>
</lable>
<lable class="checkbox-normal-v2">
　　<input type="checkbox" name="checkbox" checked><span></span>
</lable>
<lable class="checkbox-normal-v2">
　　<input type="checkbox" name="checkbox" disabled><span></span>
</lable>

.checkbox-normal-v2 {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  border: 1px solid #AAB8D4;
  vertical-align: middle;
  border-radius: 6px;
}
.checkbox-normal-v2 input {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
}
.checkbox-normal-v2 span {
  position: absolute;
  top: -1px;
  left: -1px;
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #FFF;
  text-align: center;
  border-radius: 6px;
}
.checkbox-normal-v2:hover span {
  border-color: #4A5FE2;
}
.checkbox-normal-v2 input[type="checkbox"] + span {
  opacity: 0;
}
.checkbox-normal-v2 input[type="checkbox"]:checked + span {
  opacity: 1;
  background: #4A5FE2;
}
.checkbox-normal-v2 input[type="checkbox"]:checked + span:before {
  position: absolute;
  top: 3px;
  left: 7px;
  display: table;
  width: 6px;
  height: 12px;
  border: 2px solid;
  border-top: 0;
  border-left: 0;
  content: ' ';
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.checkbox-normal-v2 input[type=radio]:disabled + span {
  border-color: rgba(162, 162, 162, 0.12) !important;
  cursor: not-allowed;
}
.checkbox-normal-v2 input[type=radio]:disabled + span:before {
  background-color: rgba(162, 162, 162, 0.12);
}

首先看结构，和制作radio一样，是label里面套了一个input和一个空的span。

input要通过opacity: 0;隐藏起来。

用span来制作所需要的样式，span画外边框，span加个before伪类来画里面画个对勾。

✔️是用一个长方形边框的二分之一，然后旋转一定的角度画出来的。

通过相邻兄弟选择器来控制选择与不选择的状态input[type=checkbox]:checked + span:before 。