SOURCE

<input id="inp_ckbox1s" type="checkbox">
<label for="inp_ckbox1s" class="lb1s">选项一</label>


<input id="inp_ckbox2s" type="checkbox">
<label for="inp_ckbox2s" class="lb2s">选项二</label>

/* inp_ckbox1s */
#inp_ckbox1s {
  display: none;
}

.lb1s {
  position: relative;
  padding-left: 22px;
  user-select: none;
}

.lb1s::before,
.lb1s::after {
  content: '';
  display: block;
  position: absolute;
}

.lb1s::before {
  top: 1px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #0688df;
  border-radius: 55%;
}

#inp_ckbox1s + label:after {
  width: 10px;
  height: 6px;
  top: 4px;
  left: 2px;
  border-left: 2px solid #0688df;
  border-bottom: 2px solid #0688df;
  transform: rotate(-45deg);
  display: none;
}

#inp_ckbox1s:checked + label:after {
  display: block;
}



/* inp_ckbox2s */
#inp_ckbox2s {
  display: none;
}

.lb2s {
  position: relative;
  padding-left: 22px;
  user-select: none;
}

.lb2s::before,
.lb2s::after {
  content: '';
  display: block;
  position: absolute;
}

.lb2s::before {
  top: 1px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #0688df;
  border-radius: 55%;
}

#inp_ckbox2s + label:after {
  width: 10px;
  height: 6px;
  top: 4px;
  left: 2px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  display: none;
}

#inp_ckbox2s:checked + label::before {
  background: #0688df;
}

#inp_ckbox2s:checked + label:after {
  display: block;
}