checkbox的实现

CSS

        .checkbox input{
            display: none;
        }
        .checkbox input + label{
            background:url(./checkbox1.png) left center no-repeat;
            background-size:20px 20px;
            padding-left:20px;
        }
        .checkbox input:checked + label{
            background-image:url(./checkbox2.png);
        }

1. input要隐藏
2. input和label要用+同时改变样式，因为input隐藏了
3. input:checked

html

    <div class="checkbox">
        <input type="checkbox" id="handsome"/>
        <label for="handsome">我很帅</label>
    </div>

1. label中for要跟input的id关联