css 修改input type CheckBox 复选框

 

<input
                  type="checkbox"
                  :value="item.id"
                  v-model="sjIds"
                  v-if="[0,1,4].includes(item.hczt)"
                />

input[type="checkbox"] {
  width: 25px;
  height: 25px;
  visibility: hidden;
  margin-right: 10px;
  border-radius: 100%;
  text-align: center;
}
input[type="checkbox"]:after {
  width: 100%;
  height: 100%;
  content: " ";
  /* background-color: #5677fc; */
  border: 1px solid #dcdfe6;
  border-radius: 100%;
  display: inline-block;
  visibility: visible;
  border-radius: 100%;
  margin-top: 2px;
}
/**选中后的样式**/
input[type="checkbox"]:checked:after {
  content: "\2713";
  /* content: "\2714"; */
  font-weight: bold;
  color: #fff;
  background-color: #3b81ea;
  border-radius: 100%;
  border: 1px solid #3b81ea;
}