- The
input
has to go before thelabel
, at the same level - The
input
issr-only
allow tab focus - The
id
andfor
attributes need to be well defined so that thelabel
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
Created
June 2, 2016 11:25
-
-
Save javierartero/3538eff14c06b143fb5164bba3d9d8eb to your computer and use it in GitHub Desktop.
Radio buttons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment