Custom Checkbox

checkbox-custom.html

<label>
  <input class="checkbox-custom" type="checkbox" name="exclude" value="exclude">Don't remind me again
</label>

checkbox-custom.scss

input[type="checkbox"] {
    &.checkbox-custom {
        margin-left: -9999px;
        width: 9999px;
        margin-right: 2.2em;
        position: relative;
        vertical-align: middle;
        height: 1em;

        &:before,
        &:after {
            content: '';
            position: absolute;
        }

        &:before {
            right: -1.5em;
            width: 1.5em;
            height: 1.5em;
            background-color: #fff;
            border: solid 1px #ccc;
            bottom: 0;
        }

        &:after {
            right: -1em;
            font-size: 1.4em;
            color: #666;
            line-height: .3em;
        }

        &:checked {
            &:after {
                content: '\2713';
            }
        }
    }
}