HTML
<html>
<body>
<div class="container">
<ul>
<li>
<input type="radio" id="r-1" name="rad"/>
<label for="r-1">Radio One</label>
</li>
<li>
<input type="radio" id="r-2" name="rad"/>
<label for="r-2">Radio Two</label>
</li>
</ul>
<br />
<ul>
<li>
<input type="checkbox" id="c-1"/>
<label for="c-1">Checkbox One</label>
</li>
<li>
<input type="checkbox" id="c-2"/>
<label for="c-2">Checkbox Two</label>
</li>
</ul>
</div>
</body>
</html>
CSS
li {
list-style: none;
font-size: 125%;
margin-bottom: 1em;
position: relative;
}
input[type="checkbox"],
input[type="radio"] {
display: none;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
padding-left: 2em;
}
input[type="checkbox"]+label:before,
input[type="checkbox"]+label:after,
input[type="radio"]+label:before {
content: '';
background: #ececec;
border-radius: 50%;
width: 20px;
height: 20px;
display: inline-block;
border: 1px solid #ccc;
z-index: -1;
position: absolute;
left: 0;
transition: all ease .5s;
}
input[type="checkbox"]+label:after{
border-radius: 0;
}
input[type="checkbox"]:checked+label:after,
input[type="radio"]:checked+label:before {
border-radius: 50% 0 50% 50%;
transition: all ease .75s;
transform: rotate( 45deg );
background: #666;
border: 1px solid #666;
}
input[type="checkbox"]:checked+label:before {
transition: all ease .75s;
border-radius: 0 50% 50% 0;
background: #666;
border: 1px solid #666;
}
