How to create custom checkbox

<div class="custom-checkbox">
  <input type="checkbox" value="None" id="custom-checkbox" name="check" />
  <label for="custom-checkbox">Custom Checkbox</label>
</div>

.custom-checkbox {
  display: flex;
  align-items: center;
}
.custom-checkbox input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 3px;
  border:#008264 3px solid;
  background:#fff;
}
.custom-checkbox input[type=checkbox] + label {
  display: inline-block;
  padding-left: 10px;
  font-size:1rem;
  vertical-align: top;
}
.custom-checkbox input[type=checkbox]:checked {
  color:#000;
  background-color: #008264;
}
.custom-checkbox input[type=checkbox]:after {
  content: "";
  opacity: 0;
  visibility: hidden;
  display: block;
  left: 9px;
  top: 3px;
  position: absolute;
  width: 6px;
  height: 13px;
  border:3px solid #008264;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
  transition: opacity 0.3s ease-in-out;
}
.custom-checkbox input[type=checkbox]:checked:after {
  opacity: 1;
  visibility: visible;
  border-color: #fff;
}