duncan of Six
3/18/2019 - 5:04 PM

Checkbox (pure CSS)

.checkbox {
    @include font-label-5;
    color: $color-underline;

    input[type="checkbox"] {
        opacity: 0; position: absolute;

    label {
        position: relative;
        display: inline-block;
        /*16px width of fake checkbox + 6px distance between fake checkbox and text*/
        padding-left: 22px;

    label::after {
        position: absolute;
        content: "";
        /*Needed for the line-height to take effect*/
        display: inline-block;

    /*Outer box of the fake checkbox*/
        height: 12px;
        width: 12px;
        border: 1px solid;
        left: 0px;
        /*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border
        *to vertically center it.
        top: 3px;

    /*Checkmark of the fake checkbox*/
    label::after {
        height: 5px;
        width: 9px;
        border-left: 2px solid;
        border-bottom: 2px solid;
        transform: rotate(-45deg);
        left: 4px;
        top: 7px;

    /*Hide the checkmark by default*/
    input[type="checkbox"] + label::after {
        content: none;

    /*Unhide on the checked state*/
    input[type="checkbox"]:checked + label::after {
        content: "";

    /*Adding focus styles on the outer-box of the fake checkbox*/
    input[type="checkbox"]:focus + label::before {
        outline: rgb(59, 153, 252) auto 5px;

<div class="checkbox">
    <input type="checkbox" id="checkbox_1">
    <label for="checkbox_1">Pure CSS Checkbox</label>