Styling default checkbox using SASS.
HTML
<div class="custom-checkbox"> <label> <input type="checkbox" name=""> <span class="checkbox-icon"></span> <span class="checkbox-text">Select</span> </label> </div>
Color Variables
$primary_color : #000; $fonts_1 : FontAwesome;
Mixins
@mixin transition($transition...){ transition: $transition; -webkit-transition: $transition; -moz-transition: $transition; -ms-transition: $transition; -o-transition: $transition; }
SASS Structure
.custom-checkbox{ position: relative; display: inline-block; min-height: 19px; padding: 0px 0px 0px 27px; label{ margin: 0; padding: 0; display: block; } .checkbox-icon{ width: 19px; height: 19px; display: block; background: lighten($primary_color, 95%); border: lighten($primary_color, 80%) 1px solid; position: absolute; top: 0px; left: 0px; text-align: center; &::before{ content: "\f00c"; font-family: $fonts_1; font-size: 13px; color: lighten($primary_color, 40%); display: block; opacity: 0; filter: alpha(opacity=0); transform: translate(4px, 0px); -webkit-transform: translate(4px, 0px); -moz-transform: translate(4px, 0px); -ms-transform: translate(4px, 0px); -o-transform: translate(4px, 0px); @include transition(all ease 0.2s); } } input{ display: none; &:checked + span.checkbox-icon{ &::before{ opacity:1; filter: alpha(opacity=100); transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); } } } .checkbox-text{ font-size: 14px; padding-top: 1px; } }
Nice post 😛
Thank you