Bootstrap Form with theme


<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 value="2">Option two
          </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 value="2">Option two
          </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();
    });
});