Custom checkbox and radiobutton pure CSS

checkboxes.html

<form>
    <h3>Radio Buttons</h3>
    <div>
        <input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
        <label for="radio-1" class="radio-custom-label">First Choice</label>
    </div>
    <div>
        <input id="radio-2" class="radio-custom"name="radio-group" type="radio">
        <label for="radio-2" class="radio-custom-label">Second Choice</label>
    </div>
    <div>
        <input id="radio-3" class="radio-custom" name="radio-group" type="radio">
        <label for="radio-3" class="radio-custom-label">Third Choice</label>
    </div>
  
    <h3>Checkboxes</h3>
    <div>
        <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
        <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
    </div>
    <div>
        <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
        <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
    </div>
    <div>
        <input id="checkbox-3" class="checkbox-custom" name="checkbox-3" type="checkbox">
        <label for="checkbox-3"class="checkbox-custom-label">Third Choice</label>    
    </div>
    </div>
</form>	

<style>
  	
.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: #fff;
    border: 2px solid #ddd;
    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 {
    content: "+";
    background: rebeccapurple;
    color: #fff;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    content: "+";
    color: #bbb;
}

</style>