Creation of Custom Checkboxes and Radio Buttons

 body {
  font-family: Raleway;
}   
.checkbox-custom, .radio-custom {
    opacity: 0;
    position: absolute;  
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
    position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
    content: '';
    background: #bccffc;
    border: 1px solid #94b2f7;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
    background: #2b2e88;
    box-shadow: inset 0px 0px 0px 4px #bccffc;
}
.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
    background: #2b2e88;
    box-shadow: inset 0px 0px 0px 4px #bccffc;
}
.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
  outline: 1px solid #ddd; /* focus style */
}