12.（高级）CSS用户体验之：自定义复选框

方法：

/*隐藏浏览器自带复选框*/

input[type="checkbox"]{
    position: absolute;

/*设置可见范围*/
    clip: rect(0,0,0,0);
}
input[type="checkbox"]+label::before{
    content: "\a0";
    display: inline-block;
    width: .8em;
    height: .8em;
    margin-right:.3em ;
    border-radius: .2em;
    background: silver;
    line-height: .65;
}

input[type="checkbox"]:checked+label::before{

    /*字符√*/
    content: "\2713";
    background: yellowgreen;
    font-weight: bold;
}

声明：以上方法参考《CSS揭秘》