| <!-- It's important to put the inputs in spans because chrome has a bug where it borks the animations of radio buttons when they're all siblings of each other --> | |
| <div class="radio"> | |
| <span><input type="radio" name="radio"></span> | |
| <span><input type="radio" name="radio"></span> | |
| <span><input type="radio" name="radio" checked></span> | |
| </div> | |
| <div class="check"> | |
| <span><input type="checkbox" name="checkbox" checked></span> | |
| <span><input type="checkbox" name="checkbox"></span> | |
| <span><input type="checkbox" name="checkbox"></span> | |
| </div> |
| @import "compass" | |
| // vars & transition | |
| // updated to be more r/g color blind friendly | |
| $on: rgba(133,255,122,1) | |
| $off: rgba(44,63,82,1) | |
| $selected: rgba(21,32,42,1) | |
| .transition | |
| @include transition( all 0.25s cubic-bezier(.75,.01,.48,2)) | |
| .bgTransition | |
| @include transition( all 0.25s ease-in-out ) | |
| // styling pseudo attributes | |
| input[type=radio] , input[type=checkbox] | |
| position: relative | |
| &:before , &:after | |
| content: "" | |
| position: absolute | |
| &:before | |
| height: 100% | |
| &[type=radio] | |
| border-radius: 30px | |
| &:before | |
| width: 100% | |
| border-radius: 30px | |
| background-color: $off | |
| box-shadow: 0 0 0 1px $off | |
| @extend .bgTransition | |
| &:after | |
| width: 100% | |
| height: 100% | |
| border-radius: 30px | |
| background-color: $selected | |
| @include scale( 0 , 0 ) | |
| @extend .transition | |
| &:checked | |
| &:after | |
| @include scale( 0.75 , 0.75 ) | |
| &:before | |
| background-color: $on | |
| box-shadow: 0 0 0 1px $on | |
| &[type=checkbox] | |
| &:before | |
| width: 200% | |
| background-color: $off | |
| box-shadow: 0 0 0 1px $off | |
| @include translate( -25% , 0 ) | |
| border-radius: 30px | |
| @extend .bgTransition | |
| &:after | |
| width: 80% | |
| height: 80% | |
| margin-top: 10% | |
| margin-left: 10% | |
| background-color: $selected | |
| border-radius: 30px | |
| @include translate( 60% , 0 ) | |
| @extend .transition | |
| &:checked | |
| &:after | |
| @include translate( -60% , 0 ) | |
| &:before | |
| background-color: $on | |
| box-shadow: 0 0 0 1px $on | |
| // holder + basic styling | |
| * | |
| -webkit-tap-highlight-color: rgba(0,0,0,0) | |
| -webkit-touch-callout: none | |
| -webkit-user-select: none | |
| -khtml-user-select: none | |
| -moz-user-select: none | |
| -ms-user-select: none | |
| user-select: none | |
| html | |
| background-color: $selected | |
| input | |
| display: block | |
| margin: 36px | |
| &[type=radio] , &[type=checkbox] | |
| cursor: pointer | |
| width: 30px | |
| height: 30px | |
| .radio , .check | |
| position: absolute | |
| @include translate( -50% , -50% ) | |
| top: 50% | |
| left: 50% | |
| .radio | |
| margin-left: -36px | |
| .check | |
| margin-left: 36px |
On supported browsers, the pseudo elements can be used to style the inputs for checkbox/radio for their checked and unchecked states while still providing a functional fallback for browsers that don't support input styling without doing weird resets. Most notable issue is pseudo elements not existing for inputs on firefox. Check it out in Chrome & Safari.
A Pen by Alex Bergin on CodePen.