input复选框改变样式

今天有人问我input复选框要怎么改变样式，查了一下，特整理下来：

<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;
 }

其中伪类里面的那个content可参照这个链接，然后对应的去修改color、background-color及边框颜色就好了
链接：实体符号