一.思路
- 隱藏css默認(rèn)的checkbox的樣式
- 通過label的for屬性與input的id關(guān)聯(lián)后改變label的樣式
二.實(shí)現(xiàn)
// html
<input type="checkbox" id="hello">
<label for="hello">hello</label>
// css
input[type="checkbox"]{
display:none;
}
input[type="checkbox"] + label:before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
border:1px solid;
border-radius: 50%;
vertical-align: middle;
margin-right: 8px;
transition: all .5s;
}
input[type="checkbox"]:checked + label:before {
background: red;
}