Stylize the Terms & Conditons checkbox. #pmpro

terms-and-conditions.css

/*
Based upon the "Checkbox Hack" article by Chris Coyier - https://css-tricks.com/the-checkbox-hack/
CSS inspired by Geoffrey Crofte - https://codepen.io/GeoffreyCrofte/pen/BiHzp
*/

/* Base for label styling */
#pmpro_tos_checked_div [type="checkbox"]:not(:checked),
#pmpro_tos_checked_div [type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
#pmpro_tos_checked_div [type="checkbox"]:checked + label,
#pmpro_tos_checked_div [type="checkbox"]:not(:checked) + label {
    position: relative;
    padding: .3em .5em .3em 1.95em;
    border-radius: 4px;
    cursor: pointer;
}

#pmpro_tos_checked_div [type="checkbox"]:not(:checked) + label {
    background-color: #ff980090;
}

#pmpro_tos_checked_div [type="checkbox"]:checked + label {
  background-color: #fff;
}

/* checkbox aspect */
#pmpro_tos_checked_div [type="checkbox"]:not(:checked) + label:before,
#pmpro_tos_checked_div [type="checkbox"]:checked + label:before {
  content: '\2713\0020';
  color: #dadada;
  font-size: 1.4em;
  position: absolute;
  top: 0.15em;
  left: 0.4em;
  width: 1.25em; height: 1.25em;
  border: 2px solid #ccc;
  background: #fff;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
  padding-left: .15em;
}
#pmpro_tos_checked_div [type="checkbox"]:checked + label:before {
    border-color: #09ad7e;
  }
/* checked mark aspect */
#pmpro_tos_checked_div [type="checkbox"]:not(:checked) + label:after,
#pmpro_tos_checked_div [type="checkbox"]:checked + label:after {
  content: '\2713\0020';
  position: absolute;
  top: .45em;
  left: .55em;
  font-size: 1.3em;
  line-height: 0.8;
  color: #09ad7e;
  transition: all .2s;
  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
  padding-left: .15em;
  border-color: #09ad7e;
}
#pmpro_tos_checked_div [type="checkbox"]:checked + label:after {
    border-color: #09ad7e !important;
}
/* checked mark aspect changes */
#pmpro_tos_checked_div [type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
#pmpro_tos_checked_div [type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
  border-color: #09ad7e;
}
/* accessibility */
#pmpro_tos_checked_div [type="checkbox"]:checked:focus + label:before,
#pmpro_tos_checked_div [type="checkbox"]:not(:checked):focus + label:before {
  border: 2px dotted #09ad7e;
}

/* hover style just for information */
#pmpro_tos_checked_div label:hover:before {
  border: 2px solid #ff9800 !important;
  color: #ff9800 !important;
  background-color: #fff4e4 !important;
}

This recipe is included in the blog post on "How to Add a Required Checkbox for Service Agreement or Terms of Service" at Paid Memberships Pro here: https://www.paidmembershipspro.com/show-link-terms-of-service-membership-checkout/