Skip to content

Instantly share code, notes, and snippets.

@artero
Forked from javierartero/_radio.sass
Created June 2, 2016 11:31
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save artero/288bfcb7abfa7522aec5cc9668365ba6 to your computer and use it in GitHub Desktop.
Save artero/288bfcb7abfa7522aec5cc9668365ba6 to your computer and use it in GitHub Desktop.
Radio buttons
$radio-color-active: $brand-primary !default
$radio-color-scale-active: 1.1 !default
$radio-box-size: 1.2em !default
$radio-box-size-padding: 2px !default
$radio-box-top: 0.05em !default
$radio-box-padding: $radio-box-size + .75em !default
.radio
input[type="radio"]
@extend .sr-only
+ label
display: inline-block
padding-left: $radio-box-padding
position: relative
z-index: 1
&:before
content: ''
display: block
position: absolute
top: $radio-box-top
left: $radio-box-size/4
width: $radio-box-size
height: $radio-box-size
border: 1px solid
border-radius: 50%
transition: all 0.3s ease-out
transform: scale(1)
background-color: transparent
background-clip: content-box
&:hover:before
border-color: $radio-color-active
color: $radio-color-active
transform: scale($radio-color-scale-active)
&:focus
+ label:before
border-color: $radio-color-active
transform: scale($radio-color-scale-active)
&:checked
+ label:before
padding: $radio-box-size-padding
background-color: $radio-color-active
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 radio 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