input checkbox 样式设置

直接在style里设置input的backgorund、color、border是无法修改input checkbox复选框样式的，需要通过伪类来设置。样式设置参考代码如下：

<input type="checkbox">

input[type="checkbox"] {
     width: 12px;
     height: 12px;
     display: inline-block;
     text-align: center;
     vertical-align: middle;
     line-height: 12px;
     position: relative;
 }
  
 input[type="checkbox"]::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     background: #fff;
     width: 100%;
     height: 100%;
     border: 1px solid #CACDCF
 }
  
 input[type="checkbox"]:checked::before {
     content: "\2610";
     background-color: #000;
     color: black;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     border: 1px solid #000;
     font-size: 12px;
     font-weight: bold;
 }