checkBox的美化

思路：

1: 首先让原来的input不可见
2: 利用label for设置替代input的样式
3: 设置 input:checked +label:before的样式

//html样式
<input id="check1" type="checkbox"/>
<label  for="check1"></label>
<!--<lable>标签的for属性，绑定到input标签上-->

/*lable标签的大小、位置、背景颜色更改，在css选择时，“+”代表相邻元素，即当前元素的下一元素*/
#check1 +label{
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    border:1px solid grey;
}

/*当input框为选中状态时，lable标签的样式，其中在css选择时，“：”表示当前input框的值，即checked；
      \2714代表对号*/
#check1:checked +label::before{ 
    display: block;
    content: "\2714";
    text-align: center;
    font-size: 16px;
    background: blue;
    color: white;
}

#check1{
    display:none;
}