css3知识汇总23：自定义复选框input+label

两会快开始了，又开始要忙起来了。今天没时间了，先把周末学的放上来吧。

【HTML】

<input type="checkbox" id="awesome" checked/>

<label for="awesome">男</label>

【css】

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

    content:'\a0'; /*不换行空格*/

    display: inline-block;

    vertical-align: 0em;

    width: 1em;

    height: 1em;

    margin-right:.2em;

    border-radius: .2em;

    background-color: silver;

    text-indent: .15em;

    line-height: 1;

}

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

    content:'\2713';

    background-color: yellowgreen;

}

input[type="checkbox"]{

    position: absolute;

    clip:rect(0,0,0,0);

}

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

    box-shadow: 0 0 .1em .1em #58a;

}

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

    background-color: gray;

    box-shadow: none;

    color:#555;

}