css改变默认checkbox样式

一.思路

• 隐藏css默认的checkbox的样式
• 通过label的for属性与input的id关联后改变label的样式

二.实现

// 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;
}