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及邊框顏色就好了
鏈接：實體符號