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關聯