A Pen by Drew Jones.

index.html

<div class="form-row">
  <input type="checkbox" id="checkmeout" />
  <label for="checkmeout">Check me out</label>
</div>
<div class="form-row">
  <input type="checkbox" id="checkedmeout" checked />
  <label for="checkedmeout">Checked me out</label>
</div>

style.less

/**
* Create a container for the checkbox, this is important as we are absolutely positioning the checkbox.
**/
.form-row {
    margin: 1em;
    position: relative;
    width: 100%;
    /**
    * Styles for our checkbox
    **/
    input[type="checkbox"] {
        /* hiding the checkbox but leaving it in the page */
        visibility: hidden;
        + label {
            padding-left: 0.5em; /* shifting the label content over a tad to make way for our checkbox */
            cursor: pointer;
            &:before,
            &:after {
                position: absolute;
                content: '';
            }
            /* building the square of the checkbox out of the :before */
            &:before {
                background: lightgrey;
                top: 0;
                left: 0;
                width: 1em;
                height: 1em;
                border: 0.1em solid grey;
            }
            /* constructing the tick using borders on a slightly rotated transparent :after */
            &:after {
                background: transparent;
                top: 0.25em;
                left: 0.25em;
                width: 0.5em;
                height: 0.25em;
                opacity: 0;
                border-left: 0.2em solid black;
                border-bottom: 0.2em solid black;
                -webkit-transform: rotate(-45deg);
                -moz-transform:    rotate(-45deg);
                -ms-transform:     rotate(-45deg);
                -o-transform:      rotate(-45deg);
                transform:         rotate(-45deg);
            }
            /* when hovering on the checkbox, indicate that by increasing the opacity a smidge */
            &:hover {
                &:after {
                    opacity: 0.4;
                }
            }
        }
        /* setting the styling on the 'checked' tick */
        &:checked {
            + label {
                &:after {
                    opacity: 1;
                }
            }
        }
    }
}
/** FOOTNOTE
* Please add your own browser prefixes and fallbacks
**/

Styled-checkbox-.markdown

Styled checkbox

Here I have styled a checkbox using only CSS (LESS)

A Pen by Drew Jones on CodePen.

License.