Checkbox

_checkbox.sass

$checkbox-color-active: $brand-primary !default
$checkbox-color-scale-active: 1.1 !default
$checkbox-box-size: 1.2em !default
$checkbox-box-top: 0.05em !default
$checkbox-box-padding: $checkbox-box-size + .75em !default

.checkbox
  input[type="checkbox"]
    @extend .sr-only

    + label
      display: inline-block
      padding-left: $checkbox-box-padding
      position: relative
      z-index: 1

      &:before
        @extend .fa
        content: ''
        display: block
        position: absolute
        top: $checkbox-box-top
        left: $checkbox-box-size/4
        width: 1em
        height: 1em
        font-size: $checkbox-box-size
        border: 1px solid
        border-radius: 2px
        transition: all 0.3s ease-out
        transform: scale(1)

      &:hover:before
        border-color: $checkbox-color-active
        color: $checkbox-color-active
        transform: scale($checkbox-color-scale-active)

    &:focus
      + label:before
        border-color: $checkbox-color-active
        color: $checkbox-color-active
        transform: scale($checkbox-color-scale-active)

    &:checked
      + label:before
        content: "\f14a" //font-awesome
        border: 0
        transform: scale(1)

checkbox.md

What is happening here:

• The input has to go before the label, at the same level
• The input is sr-only allow tab focus
• The id and for attributes need to be well defined so that the label can properly check and uncheck the input when you click on it
• The label has a :before pseudo-element that mimics the checkbox appearance
• Using the CSS selector :checked we can style the checked appearance