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