WordPress Hosting
Free Photos
WordPress Themes

Dynamic Yes/No Form with CSS3

HTML
<form action=""> <input type="radio" name="rdo" id="yes" checked /> <input type="radio" name="rdo" id="no"/> <div class="switch"> <label for="yes">Yes</label> <label for="no">No</label> <span></span> </div> </form>
STYLUS
green = #00bc9c red = #eb4f37 body font-family sans-serif font-weight 800 background #433A3F .switch position absolute top 50% left 50% width 150px height 50px text-align center margin -30px 0 0 -75px background green transition all 0.2s ease border-radius 25px span position absolute width 20px height 4px top 50% left 50% margin -2px 0px 0px -4px background white display block transform rotate(-45deg) transition all 0.2s ease &:after content "" display block position absolute width 4px height 12px margin-top -8px background white transition all 0.2s ease input[type=radio] display none .switch label cursor pointer color rgba(#000, .2) width 60px line-height 50px transition all 0.2s ease label[for=yes] position absolute left 0px height 20px label[for=no] position absolute right 0px #no:checked ~ .switch background red #no:checked ~ .switch span background white margin-left -8px &:after background white height 20px margin-top -8px margin-left 8px #yes:checked ~ .switch label[for=yes] color white #no:checked ~ .switch label[for=no] color white
JAVASCRIPT
Expand for more options Login