Skip to content

Instantly share code, notes, and snippets.

@estebanrfp
Created March 25, 2016 10:01
Show Gist options
  • Save estebanrfp/057114b49ae3a83e6a2c to your computer and use it in GitHub Desktop.
Save estebanrfp/057114b49ae3a83e6a2c to your computer and use it in GitHub Desktop.
Animated form checkboxes
<form method="post" action="/">
<fieldset>
<legend>Select your pizza toppings:</legend>
<input id="ham" type="checkbox" name="toppings" value="ham">
<label for="ham">Ham</label>
<input id="pepperoni" type="checkbox" name="toppings" value="pepperoni">
<label for="pepperoni">Pepperoni</label>
<input id="mushrooms" type="checkbox" name="toppings" value="mushrooms">
<label for="mushrooms">Mushrooms</label>
</fieldset>
</form>
body {
padding: 20px;
color: #373737;
font-size: 62.5%;
line-height: 2.0em;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form {
width: 400px;
}
legend {
font-size: 16px;
font-family: monospace;
}
fieldset {
padding: 15px;
}
input[type=checkbox] {
opacity: 0;
float:left;
}
input[type=checkbox] + label {
margin: 0 0 0 20px;
position: relative;
cursor: pointer;
font-size: 16px;
font-family: monospace;
float: left;
}
input[type=checkbox] + label ~ label {
margin: 0 0 0 40px;
}
input[type=checkbox] + label::before {
content: ' ';
position: absolute;
left: -35px;
top: -3px;
width: 25px;
height: 25px;
display: block;
background: white;
border: 1px solid #A9A9A9;
}
input[type=checkbox] + label::after {
content: ' ';
position: absolute;
left: -35px;
top: -3px;
width: 23px;
height: 23px;
display: block;
z-index: 1;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE4MS4yIDI3MyAxNyAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAxODEuMiAyNzMgMTcgMTYiPjxwYXRoIGQ9Ik0tMzA2LjMgNTEuMmwtMTEzLTExM2MtOC42LTguNi0yNC04LjYtMzQuMyAwbC01MDYuOSA1MDYuOS0yMTIuNC0yMTIuNGMtOC42LTguNi0yNC04LjYtMzQuMyAwbC0xMTMgMTEzYy04LjYgOC42LTguNiAyNCAwIDM0LjNsMjMxLjIgMjMxLjIgMTEzIDExM2M4LjYgOC42IDI0IDguNiAzNC4zIDBsMTEzLTExMyA1MjQtNTI0YzctMTAuMyA3LTI1LjctMS42LTM2eiIvPjxwYXRoIGZpbGw9IiMzNzM3MzciIGQ9Ik0xOTcuNiAyNzcuMmwtMS42LTEuNmMtLjEtLjEtLjMtLjEtLjUgMGwtNy40IDcuNC0zLjEtMy4xYy0uMS0uMS0uMy0uMS0uNSAwbC0xLjYgMS42Yy0uMS4xLS4xLjMgMCAuNWwzLjMgMy4zIDEuNiAxLjZjLjEuMS4zLjEuNSAwbDEuNi0xLjYgNy42LTcuNmMuMy0uMS4zLS4zLjEtLjV6Ii8+PHBhdGggZD0iTTExODcuMSAxNDMuN2wtNTYuNS01Ni41Yy01LjEtNS4xLTEyLTUuMS0xNy4xIDBsLTI1My41IDI1My41LTEwNi4yLTEwNi4yYy01LjEtNS4xLTEyLTUuMS0xNy4xIDBsLTU2LjUgNTYuNWMtNS4xIDUuMS01LjEgMTIgMCAxNy4xbDExNC43IDExNC43IDU2LjUgNTYuNWM1LjEgNS4xIDEyIDUuMSAxNy4xIDBsNTYuNS01Ni41IDI2Mi0yNjJjNS4yLTMuNCA1LjItMTIgLjEtMTcuMXpNMTYzNC4xIDE2OS40bC0zNy43LTM3LjdjLTMuNC0zLjQtOC42LTMuNC0xMiAwbC0xNjkuNSAxNjkuNS03MC4yLTcxLjljLTMuNC0zLjQtOC42LTMuNC0xMiAwbC0zNy43IDM3LjdjLTMuNCAzLjQtMy40IDguNiAwIDEybDc3LjEgNzcuMSAzNy43IDM3LjdjMy40IDMuNCA4LjYgMy40IDEyIDBsMzcuNy0zNy43IDE3NC43LTE3Ni40YzEuNi0xLjcgMS42LTYuOS0uMS0xMC4zeiIvPjwvc3ZnPg==') no-repeat center center;
-ms-transition: all .2s ease;
-webkit-transition: all .2s ease;
transition: all .3s ease;
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
input[type=checkbox]:checked + label::after {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment