Skip to content

Instantly share code, notes, and snippets.

@javierartero
Last active June 7, 2016 16:19
Show Gist options
  • Save javierartero/fc77e36b8c6807da7fa54f91e2b6117a to your computer and use it in GitHub Desktop.
Save javierartero/fc77e36b8c6807da7fa54f91e2b6117a to your computer and use it in GitHub Desktop.
Checkbox
$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)

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment