"Bootstrap form theme"
Bootstrap 3.1.0 Snippet by Zlevitz

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container auth"> <h1 class="text-center">Bootstrap form theme <span>It's nice!</span> </h1> <div id="big-form" class="well auth-box"> <form> <fieldset> <!-- Form Name --> <legend>Nice form example</legend> <div class="btn-group"> <a href="index.html" class="btn btn-default">All</a> <a href="example1.html" class="btn btn-default">example 1</a> <a href="example2.html" class="btn btn-default">example 2</a> </div> <!-- Text input--> <div class="form-group"> <label class=" control-label" for="textinput">Username</label> <div class=""> <input id="textinput" name="textinput" placeholder="Username" class="form-control input-md" type="text"> <span class="help-block">help</span> </div> </div> <!-- Password input--> <div class="form-group"> <label class=" control-label" for="passwordinput">Password</label> <div class=""> <input id="passwordinput" name="passwordinput" placeholder="Password" class="form-control input-md" type="password"> <span class="help-block">help</span> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class=" control-label" for="selectbasic">Country</label> <div class=""> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class=" control-label" for="radios">Are you awesome</label> <div class=""> <div class="radio"> <label for="radios-0"> <input name="radios" id="radios-0" value="1" checked="checked" type="radio"> Yes </label> </div> <div class="radio"> <label for="radios-1"> <input name="radios" id="radios-1" value="2" type="radio"> No </label> </div> </div> </div> <!-- Button --> <div class="form-group"> <label class=" control-label" for="singlebutton">Do you like this button</label> <div class=""> <button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button> </div> </div> <div class="form-group"> <label class=" control-label" for="singlebutton">And this?</label> <div class=""> <button id="singlebutton" name="singlebutton" class="btn btn-default">Button</button> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class=" control-label" for="button1id">Double the action</label> <div class=""> <button id="button1id" name="button1id" class="btn btn-success">Good Button</button> <button id="button2id" name="button2id" class="btn btn-danger">Scary Button</button> </div> </div> <!-- File Button --> <div class="form-group"> <label class=" control-label" for="filebutton">Avatar</label> <div class=""> <input id="filebutton" name="filebutton" class="input-file" type="file"> </div> </div> <!-- Select Multiple --> <div class="form-group"> <label class=" control-label" for="selectmultiple">Category</label> <div class=""> <select id="selectmultiple" name="selectmultiple" class="form-control" multiple="multiple"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class=" control-label" for="radios">Do you like pie?</label> <div class=""> <label class="radio-inline" for="radios-0"> <input name="radios" id="radios-0" value="1" checked="checked" type="radio"> yes </label> <label class="radio-inline" for="radios-1"> <input name="radios" id="radios-1" value="2" type="radio"> No </label> <label class="radio-inline" for="radios-2"> <input name="radios" id="radios-2" value="3" type="radio"> what is pie? </label> <label class="radio-inline" for="radios-3"> <input name="radios" id="radios-3" value="4" type="radio"> I hate it! </label> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class=" control-label" for="checkboxes">Extra features</label> <div class=""> <div class="checkbox"> <label for="checkboxes-0"> <input name="checkboxes" id="checkboxes-0" value="1" type="checkbox"> Paper plains </label> </div> <div class="checkbox"> <label for="checkboxes-1"> <input name="checkboxes" id="checkboxes-1" value="2" type="checkbox"> Iron man </label> </div> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="form-group"> <label class=" control-label" for="checkboxes">Any more?</label> <div class=""> <label class="checkbox-inline" for="checkboxes-0"> <input name="checkboxes" id="checkboxes-0" value="1" type="checkbox"> One </label> <label class="checkbox-inline" for="checkboxes-1"> <input name="checkboxes" id="checkboxes-1" value="2" type="checkbox"> Two </label> <label class="checkbox-inline" for="checkboxes-2"> <input name="checkboxes" id="checkboxes-2" value="3" type="checkbox"> Drum and bass </label> <label class="checkbox-inline" for="checkboxes-3"> <input name="checkboxes" id="checkboxes-3" value="4" type="checkbox"> Dub </label> </div> </div> <!-- Search input--> <div class="form-group"> <label class=" control-label" for="searchinput">Search Input</label> <div class=""> <input id="searchinput" name="searchinput" placeholder="placeholder" class="form-control input-md" type="search"> <p class="help-block">help</p> </div> </div> <!-- Textarea --> <div class="form-group"> <label class=" control-label" for="textarea">Text Area</label> <div class=""> <textarea class="form-control" id="textarea" name="textarea">default text</textarea> </div> </div> </fieldset> </form> </div> <div class="clearfix"></div> </div>
.margin-top-20{ margin-top: 20px; } body{ background:url('http://www.wallpaperup.com/uploads/wallpapers/2012/08/30/12087/3574f899daef41d2f145eba13ff7840f.jpg'); background-size:100% 100%; background-attachment: fixed; background-repeat:no-repeat; font-family: 'Open Sans', sans-serif; padding-bottom: 40px; } .auth h1{ color:#fff!important; font-weight:300; font-family: 'Open Sans', sans-serif; } .auth h1 span{ font-size:21px; display:block; padding-top: 20px; } .auth .auth-box legend{ color:#fff; border:none; font-weight:300; font-size:24px; } .auth .auth-box{ background-color:#fff; max-width:460px; margin:0 auto; border:1px solid rgba(255, 255, 255, 0.4);; background-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2); margin-top:40px; -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.32); -moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.32); box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.32); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transition: background 1s ease-in-out; -moz-transition: background 1s ease-in-out; -ms-transition: background 1s ease-in-out; -o-transition: background 1s ease-in-out; transition: background 1s ease-in-out; } @media(max-width:460px){ .auth .auth-box{ margin:0 10px; } } .auth .auth-box input::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; font-weight:300; } .auth .auth-box input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff; font-weight:300; } .auth .auth-box input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff; font-weight:300; } .auth .auth-box input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #fff; font-weight:300; } .auth span.input-group-addon, .input-group-btn button{ border:none; background: #fff!important; color:#000!important; } .auth form{ font-weight:300!important; } .auth form input[type="text"], .auth form input[type="password"], .auth form input[type="email"], .auth form input[type="search"]{ border:none; padding:10px 0 10px 0; background-color: rgba(255, 255, 255, 0)!important; background: rgba(255, 255, 255, 0); color:#fff; font-size:16px; border-bottom:1px dotted #fff; border-radius:0; box-shadow:none!important; height:auto; } .auth textarea{ background-color: rgba(255, 255, 255, 0)!important; color:#fff!important; } .auth input[type="file"] { color:#fff; } .auth form label{ color:#fff; font-size:21px; font-weight:300; } /*for radios & checkbox labels*/ .auth .radio label, .auth label.radio-inline, .auth .checkbox label, .auth label.checkbox-inline{ font-size: 14px; } .auth form .help-block{ color:#fff; } .auth form select{ background-color: rgba(255, 255, 255, 0)!important; background: rgba(255, 255, 255, 0); color:#fff!important; border-bottom:1px solid #fff!important; border-radius:0; box-shadow:none; } .auth form select option{ color:#000; } /*multiple select*/ .auth select[multiple] option, .auth select[size] { color:#fff!important; } /*Form buttons*/ .auth form .btn{ background:none; -webkit-transition: background 0.2s ease-in-out; -moz-transition: background 0.2s ease-in-out; -ms-transition: background 0.2s ease-in-out; -o-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; } .auth form .btn-default{ color:#fff; border-color:#fff; } .auth form .btn-default:hover{ background:rgba(225, 225, 225, 0.3); color:#fff; border-color:#fff; } .auth form .btn-primary:hover{ background:rgba(66, 139, 202, 0.3); } .auth form .btn-success:hover{ background:rgba(92, 184, 92, 0.3); } .auth form .btn-info :hover{ background:rgba(91, 192, 222, 0.3); } .auth form .btn-warning:hover{ background:rgba(240, 173, 78, 0.3); } .auth form .btn-danger:hover{ background:rgba(217, 83, 79, 0.3); } .auth form .btn-link{ border:none; color:#fff; padding-left:0; } .auth form .btn-link:hover{ background:none; } .auth label.label-floatlabel { font-weight: 300; font-size: 11px; color:#fff; left:0!important; top: 1px!important; }
(function(e,t,n,r){function o(t,n){this.$element=e(t);this.settings=e.extend({},s,n);this.init()}var i="floatlabel",s={slideInput:true,labelStartTop:"20px",labelEndTop:"10px",transitionDuration:.3,transitionEasing:"ease-in-out",labelClass:"",typeMatches:/text|password|email|number|search|url/};o.prototype={init:function(){var e=this;var n={"-webkit-transition":"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing,"-moz-transition":"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing,"-o-transition":"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing,"-ms-transition":"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing,transition:"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing};if(this.$element.prop("tagName").toUpperCase()!=="INPUT"){return}if(!this.settings.typeMatches.test(this.$element.attr("type"))){return}var r=this.$element.attr("id");if(!r){r=Math.floor(Math.random()*100)+1;this.$element.attr("id",r)}var i=this.$element.attr("placeholder");var s=this.$element.data("label");var o=this.$element.data("class");if(!o){o=""}if(!i||i===""){i="You forgot to add placeholder attribute!"}if(!s||s===""){s=i}this.inputPaddingTop=parseFloat(this.$element.css("padding-top"))+10;this.$element.wrap('<div class="floatlabel-wrapper" style="position:relative"></div>');this.$element.before('<label for="'+r+'" class="label-floatlabel '+this.settings.labelClass+" "+o+'">'+s+"</label>");this.$label=this.$element.prev("label");this.$label.css({position:"absolute",top:this.settings.labelStartTop,left:this.$element.css("padding-left"),display:"none","-moz-opacity":"0","-khtml-opacity":"0","-webkit-opacity":"0",opacity:"0"});if(!this.settings.slideInput){this.$element.css({"padding-top":this.inputPaddingTop})}this.$element.on("keyup blur change",function(t){e.checkValue(t)});t.setTimeout(function(){e.$label.css(n);e.$element.css(n)},100);this.checkValue()},checkValue:function(e){if(e){var t=e.keyCode||e.which;if(t===9){return}}var n=this.$element.data("flout");if(this.$element.val()!==""){this.$element.data("flout","1")}if(this.$element.val()===""){this.$element.data("flout","0")}if(this.$element.data("flout")==="1"&&n!=="1"){this.showLabel()}if(this.$element.data("flout")==="0"&&n!=="0"){this.hideLabel()}},showLabel:function(){var e=this;e.$label.css({display:"block"});t.setTimeout(function(){e.$label.css({top:e.settings.labelEndTop,"-moz-opacity":"1","-khtml-opacity":"1","-webkit-opacity":"1",opacity:"1"});if(e.settings.slideInput){e.$element.css({"padding-top":e.inputPaddingTop})}},50)},hideLabel:function(){var e=this;e.$label.css({top:e.settings.labelStartTop,"-moz-opacity":"0","-khtml-opacity":"0","-webkit-opacity":"0",opacity:"0"});if(e.settings.slideInput){e.$element.css({"padding-top":parseFloat(e.inputPaddingTop)-10})}t.setTimeout(function(){e.$label.css({display:"none"})},e.settings.transitionDuration*1e3)}};e.fn[i]=function(t){return this.each(function(){if(!e.data(this,"plugin_"+i)){e.data(this,"plugin_"+i,new o(this,t))}})}})(jQuery,window,document) $(document).ready(function(){ //Floatlabel $('input').floatlabel(); $('a, button').click(function(e){ e.preventDefault(); }); });

Related: See More


Questions / Comments: