Custom checkbox + label

<label class="control label checkbox">
  <input type="checkbox">
  <span class="indicator"></span>Checkbox Label
</label>


label {
  user-select: none;
  color: rgb(0, 0, 250);
  cursor: pointer;
  display: inline-block;
  padding-left: 26px;
  position: relative;
  -webkit-user-select: none;
  
}

input[type=checkbox] {
left: 0px;
display: block;
position: absolute;
z-index: -1;
-webkit-user-select: none;
}

.indicator {
background-color: rgb(19, 124, 189);
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
margin-left: -26px;
margin-right: 10px;
margin-top: -3px;
position: relative;
vertical-align: middle;
width: 14px;
-webkit-user-select: none;
}

.indicator::after {
  content: "";
  position: absolute;
  border-bottom: 1px solid white;
 border-left: 1px solid white;
 height: 3px;
 width: 8px;
 top: 4px;
 left: 3px;
 background-color: transparent;
 transform: rotate(-45deg);
 -webkit-user-select: none;
}

.indicator::before {
  user-select: none;
  -webkit-user-select: none;
content: "";
display: block;
height: 14px;
width: 14px;
background-color: rgba(0,0,0,0.2);
-webkit-user-select: none;
}

input[type=checkbox]:checked + .indicator {
  -webkit-user-select: none;
  background-color: dodgerblue;
  -webkit-user-select: none;
}

input[type=checkbox]:not(:checked) + .indicator:after {
  opacity: 0;
}