a full css3 checkbox style
Inspiration got thanks to http://scotch.io/tutorials/css/create-a-google-polymer-checkbox-using-css3
<div class='fern-checkbox'> | |
<input type='checkbox' id='fern-check' /> | |
<!-- The for html5 selector is used to to correspond with the input --> | |
<label class='fern-checkbox-label' for='fern-check'> | |
<span class='fern-checkbox-coma'></span> | |
<span class='fern-checkbox-box'></span> | |
check me! | |
</labe> | |
</div> |
a full css3 checkbox style
Inspiration got thanks to http://scotch.io/tutorials/css/create-a-google-polymer-checkbox-using-css3
/* Hide the checkbox */ | |
.fern-checkbox input[type=checkbox] { | |
display: none; | |
} | |
/* The cursor is set on label */ | |
.fern-checkbox-label { | |
cursor: pointer; | |
} | |
/* The whole form element */ | |
.fern-checkbox { | |
position: relative; | |
width: 150px; | |
margin: 30px auto; | |
padding-left: 20px; | |
font-size: 16px; | |
} | |
/* span shared properties */ | |
.fern-checkbox span { | |
display: block; | |
position: absolute; | |
left: 0px; | |
transition: 0.3s ease; | |
transform: rotate(0deg); | |
} | |
/* Empty box style */ | |
.fern-checkbox-label .fern-checkbox-box { | |
width: 10px; | |
height: 10px; | |
top: 2px; | |
top: 2px; | |
border: 2px solid #000000; | |
border-radius: 3px; | |
} | |
/* Coma style */ | |
.fern-checkbox-label .fern-checkbox-coma { | |
width: 9px; | |
height: 5px; | |
left: 3px; | |
top: 3px; | |
opacity: 0; | |
border-top: 4px solid #4FD154; | |
border-right: 4px solid #4FD154; | |
} | |
/* Animation */ | |
.fern-checkbox input[type=checkbox]:checked ~ .fern-checkbox-label .fern-checkbox-box { | |
opacity: 0; | |
transform: rotate(180deg); | |
} | |
.fern-checkbox input[type=checkbox]:checked ~ .fern-checkbox-label .fern-checkbox-coma { | |
opacity: 1; | |
transform: rotate(135deg); | |
} |