Cacher is the code snippet organizer for pro developers

.check-label, .radio-label {
  cursor: pointer;
}

.custom-checkbox input, .custom-radio input {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  }
.custom-checkbox span, .custom-radio span {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  width: 20px;
  height: 20px;
  border: 1px solid #cfcfcf;
  background: #fff;
  position: relative;
  top: 2px;
  }

  .custom-radio input[type=radio]:checked + span{background: #959595;border-color: #959595;}
  
  .custom-checkbox span:after, .custom-radio span:after {
    content: '';
    position: absolute;
    background: transparent;
    opacity: 0; }

.custom-checkbox span {
  border-radius: 2px; }
  .custom-checkbox span:after {
    width: 12px;
    height: 7px;
    top: 4px;
    left: 3px;
    border: 3px solid #ffffff;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    }

 .custom-checkbox input[type=checkbox]:checked + span{background: #023a7f;border-color: #023a7f;}
 
.custom-checkbox input[type=checkbox]:checked + span:after {
  opacity: 1; }

.custom-radio span {
  border-radius: 100%; }
  .custom-radio span:after {
    width: 10px;
    height: 10px;
    top: 4px;
    left: 4px;
    background: #023a7f;
    border-radius: 100%;
    }
.custom-radio input[type=radio]:checked + span:after {
  opacity: 1; }


.check-label .custom-checkbox, .radio-label .custom-radio{
	vertical-align:middle;
	display: inline-block;
	margin-right: 3px;
}

<span class="custom-radio">
	<input type="radio" name="" id="">
	<span></span>
</span>