人生何其短，要笑得分外甜

公司的H5项目又让我重新捡回来HTML5和原生JS和Jquery,今日遇到了checkbox的样式问题，做一个小小记录。

---

直接使用HTML5中的input复选框checkbox的样式是这样滴（左） 但是嘞，UI设计稿是这样滴（右）：

<input class="sure" type="checkbox" name="" value="">

 因此，我们需要动脑筋修改checkbox的样式了。

1. 首先，需要添加一段CSS隐藏所有的Checkbox复选框。之后我们改变它的外观

input[type=checkbox] {
  visibility: hidden;
}

 2. 隐藏掉所有的Checkbox复选框后，我们需要添加一个label HTML元素。

由于，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着可以通过label的点击事件来处理我们的Checkbox复选框。

<div class="checkBox">
  <input class="sure" type="checkbox" name="" value="1" id="checkBoxInput">
  <label for="checkBoxInput"></label>
</div>

 因此，一个label不足以完成任务，我们用一个DIV元素包含checkbox，我们需要使用它们来做样式。

.checkBox {
  position: relative;
  width: 0.48rem;
  height: 0.48rem;
  background: #ffffff;
}

3. label标签用于Click事件和我们要定义的复选框的方框样式。

.checkBox label {
  cursor: pointer;
  position: absolute;
  width: 0.48rem;
  height: 0.48rem;
  top:0;
  left: 0;
  background: #ffffff;
  border: 0.01rem solid #c2c2c2;
  border-radius: 0.04rem;
}

 4. 接下来，我们要创建方框中的对勾，对于这一点，我们可以使用:after伪类创建一个新的元素，为了实现这个样式，我们可以创建一个的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后，它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下，这样看起来就像是一个对勾。

.checkBox label:after {
  opacity: 0.5;  /*修改为0*/
  content: '';
  position: absolute;
  width: 0.3rem;
  height: 0.2rem;
  background: transparent;
  top: 0.09rem;
  left: 0.07rem;
  border: 0.05rem solid #2381D8;
  border-top: none;
  border-right: none;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

 5. 在上面的CSS中，我们已经设置它的透明度为0.5，所以你直接可以看到复选框有一个半透明的对勾。可以最后修改其为透明，悬停的时候加深一点，在选中时把设置为不透明。

.checkBox label:hover::after {
  opacity: 0;
}
.checkBox input[type=checkbox]:checked + label:after {
  opacity: 1;
}

至此，就完成了checkbox的样式修改，你可以按照你的UI修改其颜色大小即可。 

---

顺便回顾一下：after和::after和:before和::before

::before和::after匹配一个虚拟元素，主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的“content”属性，默认是内联元素。

浅谈css的伪元素::after和::before     https://www.cnblogs.com/yuer20180726/p/11150213.html

---

参考链接：https://www.jb51.net/css/563957.html 纯CSS设置Checkbox复选框控件的样式(五种方法)