[css] checkbox 디자인 바꾸기

<div>
<input type="checkbox" id="check_test_box" /> 
<label for="check_test_box"> <span></span> 체크박스입니다</label>
</div>


<style>


input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: -2px 10px 0 0;
    vertical-align: middle;
    background: url(checkbox.svg) left top no-repeat;
    cursor: pointer;
    background-size: cover;
}


input[type="checkbox"]:checked + label span {
    background:url(checkbox.svg)  -26px top no-repeat;
     background-size: cover;
}
</style>

checkbox.svg

---

결과

---

체크박스입니다