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揭秘》