Free Photos
WordPress Themes

Smooth Radio & Checkbox Inputs

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; }
JAVASCRIPT
Expand for more options Login