Custom SCSS radio/checkbox. No javascript. IE9+ TODO: Disabled states, Hover, focus etc, Fallback to real input for <IE9

custom-checkboxes.scss

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

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

input[type="radio"],
input[type="checkbox"]{
    @extend .visuallyhidden;
}

input[type="radio"] + label,
input[type="checkbox"] + label{
    position:relative;
    padding-left:25px;
    &:before{
        position:absolute;
        left:0;
        top:0;
        content:" ";
        display:block;
        width:20px;
        height:20px;
        background:red;
    }
    &:hover:before{
        //background:blue;
    }
}
input[type="radio"] + label{
    &:before{}
}
input[type="checkbox"] + label{
    &:before{}
}

input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label{
    text-decoration: underline;
}

input[type="radio"]:checked + label{
    &:before{
        background:blue;
    }
}
input[type="checkbox"]:checked + label{
    &:before{
        background:blue;
    }
}

index.html

<input type="radio" id="credit" name="method" value="credit">
<label for="credit">Credit</label>

<input type="checkbox" id="giftcard" name="method" value="giftcard">
<label for="giftcard">Gift Card</label>

Thanks so much for posting this! I've been looking for something compatible that didn't depend on spans or javascript. This did the trick 👍

Thank you!