SCSS: Pure CSS radio and checkbox inputs

_radio-and-checkbox-inputs.scss

.input-helper {
    position: relative;
    display: inline-block;
    
    &:before {
        content: '';
        display: block;
        position: absolute;
    }
}

.input-helper--radio {
    padding-left: 18px;

    &:before {
        top: 1px;
        left: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid #222;
    }
}

.input-helper--checkbox {
    padding-left: 20px;

    &:before {
        top: 0;
        left: 0;
        width: 13px;
        height: 13px;
        border: 1px solid #222;
    }
}

input[type="radio"] {
    display: none;

    &:checked + label:before {
        background: #222;
    }
}

input[type="checkbox"] {
    display: none;

    &:checked + label:before {
        background: #222;
    }
}

radio-and-checkbox-inputs.html

<form>
    <input id="radio-input-1" type="radio" value="myValue 1" name="radio-group" checked>
    <label for="radio-input-1" class="input-helper input-helper--radio">myValue 1</label>
    
    <input id="radio-input-2" type="radio" value="myValue 2" name="radio-group">
    <label for="radio-input-2" class="input-helper input-helper--radio">myValue 2</label>
    
    <input id="checkbox-input-1" type="checkbox" value="myValue 1" checked>
    <label for="checkbox-input-1" class="input-helper input-helper--checkbox">myValue 1</label>
    
    <input id="checkbox-input-2" type="checkbox" value="myValue 2">
    <label for="checkbox-input-2" class="input-helper input-helper--checkbox">myValue 2</label>
</form>