CheckBox 設置背景色

需要使用色 #ec6337(當然可以是任意顏色)，解決問題：記住密碼定制 CheckBox，解釋全在注釋里

主要使用到 ::before 或 ::after 偽類處理，偽裝成內部的那個勾

• html

1.  
   <label>
2.  
   <input type="checkbox" /> // 注意嵌在 label 里面
3.  
   記住密碼
4.  
   <div class="show-box" /> // 注意嵌在 label 里面
5.  
   </label>

• CSS(LESS)

1.  
   label {
2.  
   position: relative;
3.  
   cursor: pointer;
4.  
    
5.  
   input {
6.  
   cursor: pointer;
7.  
   }
8.  
    
9.  
   input:checked + .show-box {
10.  
    background: #ec6337;
11.  
    }
12.  
     
13.  
    .show-box {
14.  
    position: absolute;
15.  
    top: 0;
16.  
    left: 0;
17.  
    width: 16px;
18.  
    height: 16px;
19.  
    border-radius: 2px;
20.  
    border: 1px solid #d8d8d8;
21.  
    background: white; // 這里取個巧，與下面顏色一樣而已
22.  
     
23.  
    &:before { // 使用了 absolute 所以無所謂是 before 還是 after
24.  
    content: ''; // 空白內容占位，當做盒模型處理，見下面
25.  
    position: absolute;
26.  
    top: 2px;
27.  
    left: 6px;
28.  
    width: 3px; // 勾的短邊
29.  
    height: 8px; // 勾的長邊
30.  
    border: solid white; // 勾的顏色
31.  
    border-width: 0 2px 2px 0; // 勾的寬度
32.  
    transform: rotate(45deg); // 定制寬高加上旋轉可以偽裝內部的白色勾
33.  
    }
34.  
    }