custom styling to the checkbox using css only

custom styling to the checkbox using css only

by Joe

HTML

<input type="checkbox"/>

CSS

input[type='checkbox']:after{
    line-height: 1.5em;
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-top: -4px;
    margin-left: -4px;
    border: 1px solid rgb(192,192,192);
    border-radius: 0.25em;
    background: rgb(224,224,224);
}

 input[type='checkbox']:checked:after {
width: 15px;
    height: 15px;
    border: 3px solid;
    content: '';
}