修改input type=“checkBox“ 的原有样式

input type="checkBox" 的原有样式无法直接修改

修改思路为：隐藏checkbox，通过label绑定checkbox，给label设置样式

vue中：（js就把input的id前的：和label的for前的：去掉然后修改id和for的内容就行）

<input :id="todo.id" type="checkBox" :checked="todo.done" @change="changeDone(todo.id)" class="checkItem">

    <label :for="todo.id"></label>

css

.checkItem{
  left: 0;
  top: 12px;
  border: none;
  background-color: #123;
  display: none;
}
.checkItem + label {
  width:25px;
  height:25px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid #888;
  position: absolute;
  top: 8px;
  left: 8px;
}
.checkItem:checked + label {
  border: 2px solid rgb(48, 213, 161);
}
.checkItem:checked +label:before{
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  content: "\2713";
  text-align: center;
  line-height: 20px;
  font-size: 20px;
  color: rgb(48, 213, 161);
  background-color: #fff;
}

效果：

 修改前