Custom policy checkbox

check.css

.policy-checkbox input {
  display: none;
}

.policy-checkbox span {
  position: relative;
  display: inline-block;
  padding-left: 30px;
}

.policy-checkbox span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 100%;
}

.policy-checkbox span::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #000;
  border: 1px solid #000;
  border-radius: 100%;
  opacity: 0;
  transition: all 0.15s;
}

.policy-checkbox span.checked::after {
  opacity: 1;
  transition: all 0.15s;
}

check.html

<label>
  <input type="checkbox">
  <span>Agree with this policy</span>
</label>

check.js

$('.policy-checkbox').click(function(){
  if ($(this).find('input').prop('checked') == true) {
    $(this).find('span').addClass('checked');
  } else {
    $(this).find('span').removeClass('checked');
  }
});