Home » Snippets » CSS3 LT Form CSS3 LT Form - Snippet --- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart --- Bootstrap Foundation Animate.css Preview HTML CSS JS <table> <tr><th><label for="form-email">Email</label></th> <td><input type="text" id="form-email"></td> </tr> <tr><th> <label for="form-country">Country</label></th> <td> <span class="lt-select-wrapper"> <select class="lt-select" name="country" id="form-country"> <option value="" selected="selected"></option> <option value="AF">Afghanistan</option> <option value="AL">Albania</option> <option value="DZ">Algeria</option> <option value="AS">American Samoa</option> <option value="AD">Andorra</option> <option value="AO">Angola</option> </select> </span> </td> </tr> <tr> <th><label>Gender</label></th> <td> <span class="lt-radio-wrapper"> <input class="lt-radio" type="radio" name="gender" id="form-gender-0" value="0" /> <label for="form-gender-0" class="lt-radio-label"></label> <label for="form-gender-0">Male</label> </span> <span class="lt-radio-wrapper"> <input class="lt-radio" type="radio" name="gender" id="form-gender-1" value="1" /> <label for="form-gender-1" class="lt-radio-label"></label> <label for="form-gender-1">Female</label> </span> </td> </tr> <tr> <th> <label for="form-bio">Bio</label> </th> <td> <textarea id="form-bio"></textarea> </td> </tr> <tr> <th> <label for="form-terms">Terms</label> </th> <td> <span class="lt-checkbox-wrapper"> <input class="lt-checkbox" id="form-terms" type="checkbox"> <label class="lt-checkbox-label" for="form-terms"></label> </span> </td> </tr> </table> /* global */ body { font-family: 'Helvetica Neue', Helvetica; font-size: 13px; background-color: #eaeaea; } table { margin:20px auto; } td{ padding:10px; } /* text, password, textarea */ input[type="text"], input[type="password"], textarea { width:180px; font-size: 14px; border:1px solid #aaa; padding:5px 5px 5px 3px; border-radius:4px; background: #fafafa; outline:none; display: inline-block; -webkit-appearance:none; position:relative; } /* select */ .lt-select { width:190px; border:1px solid #aaa; padding:5px 5px 5px 3px; border-radius:4px; background: #fafafa; outline:none; display: inline-block; -webkit-appearance:none; cursor:pointer; position:relative; } .lt-select { padding-right:18px } .lt-select-wrapper { position:relative } .lt-select-wrapper:after { content:'<>'; font:12px "Consolas", monospace; color:#aaa; -webkit-transform:rotate(90deg); -moz-transform: rotate(90deg); position:absolute; right:4px; top:0px; padding:0 0 2px; pointer-events:none; border-bottom:1px solid #ddd; } .lt-select-wrapper:hover:after{ color: #666; } @-moz-document url-prefix() { select {padding-right:2px} .lt-select-wrapper:after { background: #fafafa; padding:0px 2px 3px 2px; top:0px; right:3px; } } /* radio */ .lt-radio { visibility: hidden; } .lt-radio-wrapper { position: relative; left: 2px; display: inline-block; float: left; margin-right: 5px; } .lt-radio-wrapper .lt-radio-label{ padding-left: 5px; } .lt-radio-wrapper .lt-radio-label { border:1px solid #aaa; cursor: pointer; position: absolute; width: 20px; padding-left: 0px; height: 20px; top: 0; left: 0px; border-radius: 4px; background: #fafafa; } .lt-radio-wrapper .lt-radio-label:after { border:1px solid #aaa; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; content: ''; position: absolute; width: 6px; height: 6px; background: transparent; top: 4px; left: 4px; border: 3px solid #333; border-radius: 6px; } .lt-radio-wrapper .lt-radio-label:hover::after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.5; } .lt-radio:checked + .lt-radio-label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } /* checkbox */ .lt-checkbox { visibility: hidden; } .lt-checkbox-wrapper { width: 20px; display:block; position: relative; } .lt-checkbox-label { border:1px solid #aaa; cursor: pointer; position: absolute; width: 20px; height: 20px; top: 0; left: 0px; border-radius: 4px; background: #fafafa; } .lt-checkbox-label:after { border:1px solid #aaa; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; content: ''; position: absolute; width: 9px; height: 5px; background: transparent; top: 4px; left: 4px; border: 3px solid #333; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .lt-checkbox-label:hover::after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.5; } .lt-checkbox:checked + .lt-checkbox-label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } Tutorials Palace 24 January, 2019 No Comments 1 171 Views CSS3 LT Form CSS Form Styles CSS Form Styles Download CSS3 LT Form Code Fullscreen Tutor Play Walkthrough Related Snippets Box Shadow Editor Canvas Particles Emission Dripping Paint CSS3 Animation National flag of Mongolia Particles Emission Based on Mouse Moves Custom Cursor Images with CSS Particle System Leaving Trails Particles Gravity Effect Glowing Particle System with Different Shapes Leave a Reply Cancel replyYour email address will not be published. Required fields are marked *Name * Email * Website Notify me of new posts by email.