Custom Checkboxes and Radios in CSS

Style custom checkboxes and radio buttons using :before and :after pseudo-elements.

Source Code

.custom-checkbox:before {
    content: ' ';
    display: inline-block;
    margin-right: 5px;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}
.custom-checkbox:checked:before {
    background-color: #4CAF50;
}