一.思路

• 隱藏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;
}