Custom "Bootstrap v4"-style check/radio-boxes. Checkboxes are animated.

bootstrap4-style-custom-check-radio-boxes

<style>
/* Original idea of styling peeped at https://codersblock.com/blog/checkbox-trickery-with-css/ */

input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.check-label,
.thumbsup-label {
  display: block;
  position: relative;
  padding-left: 1.8em;
  cursor: pointer;
}

.check-label::before,
.check-label::after,
.thumbsup-label::before,
.thumbsup-label::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}

input[type="checkbox"] + .check-label::before,
input[type="checkbox"] + .check-label::after,
input[type="checkbox"] + .thumbsup-label::before,
input[type="checkbox"] + .thumbsup-label::after {
  border-radius: 15%;
}
input[type="radio"] + .check-label::before,
input[type="radio"] + .check-label::after,
input[type="radio"] + .thumbsup-label::before,
input[type="radio"] + .thumbsup-label::after {
  border-radius: 50%;
}

.check-label::before,
.thumbsup-label::before {
  display: block;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid gray;

  background: linear-gradient(to left top, rgba(253, 253, 252, 1) 0%/*bottom-right color*/, rgba(220, 220, 215, 1) 100% /*top-left color*/);
}

input:hover + .check-label::before,
input:hover + .thumbsup-label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  background: linear-gradient(to left top, rgba(253, 253, 252, 1) 0%/*bottom-right color*/, rgba(179, 179, 170, 1) 100% /*top-left color*/);
}

input:focus + .check-label::before,
input:focus + .thumbsup-label::before {
  border-color: #9ab593;
}

input:checked + .check-label::before,
input:checked + .thumbsup-label::before {
  background: #007BFF;
  transition: color 1s;
}

input[type="checkbox"] + .check-label::after,
input[type="checkbox"] + .thumbsup-label::after,
input[type="radio"]:checked + .check-label::after,
input[type="radio"]:checked + .thumbsup-label::after {
  font-family: 'Font Awesome 5 Free'; /* or 'Font Awesome 5 Pro' for Pro users */
  font-weight: 900;
  color: #007BFF;
  content: '\f00c';

  font-size: .9em;
  margin: .15em 0 0 .355em; /* BTW good values for 1em font-size is: margin: .1em 0 0 .28em; */
}

input[type="checkbox"] + .thumbsup-label::after,
input[type="radio"]:checked + .thumbsup-label::after {
  content: '\f164';
  font-size: .8em;
  margin: .15em 0 0 .45em;
}

input[type="checkbox"] + .check-label::after,
input[type="checkbox"] + .thumbsup-label::after {
  transform: scale(4) rotateZ(-20deg);
  transition: all .3s ease-in;
  opacity: 0;
}

input[type="checkbox"]:checked + .check-label::after,
input[type="checkbox"]:checked + .thumbsup-label::after,
input[type="radio"]:checked + .check-label::after,
input[type="radio"]:checked + .thumbsup-label::after {
  color: #FFF;
  transform: scale(1) rotateZ(0deg);
  opacity: 1;
}
</style>

<form style="margin: 1em;">

    <input id="permitted" type="checkbox" checked />
    <label for="permitted" style="font-size: 1em" class="check-label">I am legally permitted to submit forms</label>

    <div>
      <input id="radio-demo1" name="radio-demo" type="radio" checked />
      <label for="radio-demo1" style="font-size: 1em" class="check-label">Radio 1</label>
      <input id="radio-demo2" name="radio-demo" type="radio" />
      <label for="radio-demo2" style="font-size: 1em" class="check-label">Radio 2</label>
    </div>

    <hr />
    <input id="permitted-t" type="checkbox" checked />
    <label for="permitted-t" style="font-size: 1em" class="thumbsup-label">I am legally permitted to submit forms</label>

    <div>
      <input id="radio-demo1-t" name="radio-demo-t" type="radio" checked />
      <label for="radio-demo1-t" style="font-size: 1em" class="thumbsup-label">Radio 1</label>
      <input id="radio-demo2-t" name="radio-demo-t" type="radio" />
      <label for="radio-demo2-t" style="font-size: 1em" class="thumbsup-label">Radio 2</label>
    </div>

  <p>Now the same again, with &times;2-sized font.</p>
  <div style="font-size: 2em;">
    <input id="big_permitted" type="checkbox" checked />
    <label for="big_permitted" style="font-size: 1em" class="check-label">I am legally permitted to submit forms</label>

    <div>
      <input id="big_radio-demo1" name="radio-demo" type="radio" checked />
      <label for="big_radio-demo1" style="font-size: 1em" class="check-label">Radio 1</label>
      <input id="big_radio-demo2" name="radio-demo" type="radio" />
      <label for="big_radio-demo2" style="font-size: 1em" class="check-label">Radio 2</label>
    </div>

    <hr />
    <input id="big_permitted-t" type="checkbox" checked />
    <label for="big_permitted-t" style="font-size: 1em" class="thumbsup-label">I am legally permitted to submit forms</label>

    <div>
      <input id="big_radio-demo1-t" name="radio-demo-t" type="radio" checked />
      <label for="big_radio-demo1-t" style="font-size: 1em" class="thumbsup-label">Radio 1</label>
      <input id="big_radio-demo2-t" name="radio-demo-t" type="radio" />
      <label for="big_radio-demo2-t" style="font-size: 1em" class="thumbsup-label">Radio 2</label>
    </div>
  </div>

</form>