<div class="container">

<div class="checkboxes">
  <input id="a" type="checkbox" tabindex="1"/><label class="green-background" for="a">Spectacles</label>
  <input id="b" type="checkbox" tabindex="2"/><label class="green-background" for="b">Testicles</label>
  <input id="c" type="checkbox" tabindex="3"/><label class="green-background" for="c">Wallet</label>
    <input id="d" type="checkbox" tabindex="4"/><label class="green-background" for="d">Watch</label>
</div>


<div class="radios">
    <input type="radio" name="yesno" value="Yes" id="radio_0" tabindex="4" checked="checked"><label for="radio_0">Yes</label>
    <input type="radio" name="yesno" value="No" id="radio_1" tabindex="5"><label for="radio_1">No</label>
</div>
  
</div>  
/*********************
Box Sizing
*********************/

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  box-sizing: border-box;
}

$checkbox-background: #fff;
$checkbox-border: #e900ff;
$checkbox-checked: $checkbox-border;
$checkbox-background-checked: yellow;

body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  background: purple;
  height: 100vh;
}

.radios,
.checkboxes {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  //margin-bottom: 1rem;
}

@mixin vh() {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

label {
  cursor: pointer;
  font-size: 1rem;
  line-height: 1rem;
}

input[type="checkbox"],
input[type="radio"] {
  @include vh();
  &:focus {
    + label {
      &:before {
      }
    }
  }
  + label {
    position: relative;
    //padding: 4px 6px 0 32px;
    padding: 0.5rem 0 0 2rem;
    margin-bottom: 1rem;
    user-select: none;
    color: $checkbox-background;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 1.75rem;
      height: 1.75rem;
      border: 2px solid $checkbox-border;
      border-radius: 0.25rem;
      background: $checkbox-background;
      text-align: center;
      transition: background 200ms ease-out;
    }
    &:after {
      content: "";
      //background-color: $checkbox-background;
      position: absolute;
      // top: 0.45rem;
      // left:  0.5rem;
      // width: 1rem;
      // height:  1rem;
      transform: scale(0);
      transition: transform 200ms ease-out;
    }
  }
}

input[type="checkbox"] {
  + label {
    &:after {
      background-color: transparent;
      content: "";
      display: block;
      position: absolute;
      left: 0.65rem;
      top: 0.25rem;
      // margin-left: 0;
      // margin-top: 0;
      width: 0.5rem;
      height: 1rem;
      opacity: 0.2;
      border-bottom: 3px solid $checkbox-checked;
      border-right: 3px solid $checkbox-checked;
      transform: rotate(45deg);
      transition: border-color 0.3s ease;
    }
  }
  &:checked {
    + label {
      &:before {
        content: "";
        //background: $checkbox-background-checked; change checked background color
      }

      &:after {
        content: "";
        opacity: 1;
        //border-bottom: 3px solid $checkbox-checked; change checked checkedbox color
        //border-right: 3px solid $checkbox-checked; change checked checkedbox color
      }
    }
  }
}

input[type="radio"] {
  + label {
    &:before,
    &:after {
      border-radius: 50%;
    }
    &:after {
      left: 0.35rem;
      top: 0.35rem;
      width: 1rem;
      height: 1rem;
    }
  }
  &:checked {
    + label {
      &:before {
        //background: $checkbox-background-checked;
        animation: borderscale 300ms ease-in;
      }
      &:after {
        background: $checkbox-checked;
        transform: scale(1);
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/rgfx/pen/KmrPrE.js