<form>
  <h1>Custom checkbox</h1>
  <div class="_checkBox_wrap">
    <input type="checkbox" id="opt1" name="opt1" value="opt1">
    <label for="opt1"> Option 1 </label>
  </div>

  <div class="_checkBox_wrap">
    <input type="checkbox" id="opt2" name="opt2" value="opt2">
    <label for="opt2"> Option 2 </label>
  </div>

  <div class="_checkBox_wrap">
    <input type="checkbox" id="opt3" name="opt3" value="opt3" required>
    <label for="opt3"> Option 3 </label>
  </div>
</form>
// reset input style
input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  
  &:focus {
    outline: none !important;
  }
}

// checkbox container
._checkBox_wrap {
  position: relative;
  display: flex;
  align-items: center;
}

// checkbox default style
input[type="checkbox"] {
  vertical-align: middle;
  height: 20px;
  width: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  margin-right: .5rem;
}

// check mark
input[type="checkbox"]::after {
    content: "";
    position: absolute;
    display: none; // hide by default
    left: 10px;
    top: 6px;
    width: 5px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

// when checked
input[type="checkbox"]:checked {
  background-color: skyblue;
  border: 1px solid skyblue;
  
  &::after{
    display: block; // show check mark
  }
}
input[type="checkbox"]:checked + label {
  color: black;
  cursor: pointer;
}

// layout
h1 {
  margin: .5rem auto;
  font-size: 1.5rem;
}

// font
@font-face {
  font-family: 'openhuninn';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.jsdelivr.net/gh/justfont/open-huninn-font@master/font/jf-openhuninn-1.1.ttf')  format('truetype');
}
body {
  color: gray;
  font-family: 'openhuninn' !important;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.