"BDM input style for VDD"
Bootstrap 3.3.0 Snippet by andy0055

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <div class="row centered-form"> <div class="col-xs-12 col-sm-8 col-md-4 col-sm-offset-2 col-md-offset-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Please sign up for Bootsnipp <small>It's free!</small></h3> </div> <div class="panel-body"> <form role="form"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="first_name" id="first_name" class="form-control input-sm floatlabel" placeholder="First Name"> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="last_name" id="last_name" class="form-control input-sm" placeholder="Last Name"> </div> </div> </div> <div class="form-group"> <input type="email" name="email" id="email" class="form-control input-sm" placeholder="Email Address"> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password" id="password" class="form-control input-sm" placeholder="Password"> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password_confirmation" id="password_confirmation" class="form-control input-sm" placeholder="Confirm Password"> </div> </div> </div> <input type="submit" value="Register" class="btn btn-info btn-block"> </form> </div> </div> </div> </div> </div>
body{ /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #1a82f7, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #1a82f7, #2F2727); /* IE 10 */ background: -ms-radial-gradient(circle, #1a82f7, #2F2727); height:600px; } .centered-form{ margin-top: 60px; } .centered-form .panel{ background: rgba(255, 255, 255, 0.8); box-shadow: rgba(0, 0, 0, 0.3) 20px 20px 20px; } label{ font-weight: normal; } label.label-floatlabel { color: #4a4a4a; font-size: 11px; } .input-sm{ height:40px; font-size:14px; color:#9b9b9b; }
$(function() { $('input').floatlabel({labelEndTop:0}); }); /** * FloatLabels * Version: 1.0 * URL: http://clubdesign.github.io/floatlabels.js/ * Description: * Author: Marcus Pohorely ( http://www.clubdesign.at ) * Copyright: Copyright 2013 / 2014 http://www.clubdesign.at */ ;(function ( $, window, document, undefined ) { var pluginName = "floatlabel", defaults = { slideInput : true, labelStartTop : '20px', labelEndTop : '10px', transitionDuration : 0.3, transitionEasing : 'ease-in-out', labelClass : '', typeMatches : /text|password|email|number|search|url/ }; function Plugin ( element, options ) { this.$element = $(element); this.settings = $.extend( {}, defaults, options ); this.init(); } Plugin.prototype = { init: function () { var self = this; var animationCss = { '-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 elementID = this.$element.attr('id'); if( !elementID ) { elementID = Math.floor( Math.random() * 100 ) + 1; this.$element.attr('id', elementID); } var placeholderText = this.$element.attr('placeholder'); var floatingText = this.$element.data('label'); var extraClasses = this.$element.data('class'); if( !extraClasses ) extraClasses = ''; if( !placeholderText || placeholderText == '' ) placeholderText = "You forgot to add placeholder attribute!"; if( !floatingText || floatingText == '' ) floatingText = placeholderText; 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="' + elementID + '" class="label-floatlabel ' + this.settings.labelClass + ' ' + extraClasses + '">' + floatingText + '</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( e ) { self.checkValue( e ); }); window.setTimeout( function() { self.$label.css( animationCss ); self.$element.css( animationCss ); }, 100); this.checkValue(); }, checkValue: function( e ) { var self = this; if( e ) { var keyCode = e.keyCode || e.which; if( keyCode === 9 ) return; } var currentFlout = 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' && currentFlout != '1' ) { this.showLabel(); } if( this.$element.data('flout') == '0' && currentFlout != '0' ) { this.hideLabel(); } }, showLabel: function() { var self = this; self.$label.css({ 'display' : 'block' }); window.setTimeout(function() { self.$label.css({ 'top' : '3px', '-moz-opacity' : '1', '-khtml-opacity' : '1', '-webkit-opacity' : '1', 'opacity' : '1' }); if( self.settings.slideInput ) { self.$element.css({ 'padding-top' : self.inputPaddingTop }); } }, 50); }, hideLabel: function() { var self = this; self.$label.css({ 'top' : self.settings.labelStartTop, '-moz-opacity' : '0', '-khtml-opacity' : '0', '-webkit-opacity' : '0', 'opacity' : '0' }); if( self.settings.slideInput ) { self.$element.css({ 'padding-top' : parseFloat( self.inputPaddingTop ) - 10 }); } window.setTimeout(function() { self.$label.css({ 'display' : 'none' }); }, self.settings.transitionDuration * 1000); } }; $.fn[ pluginName ] = function ( options ) { return this.each(function() { if ( !$.data( this, "plugin_" + pluginName ) ) { $.data( this, "plugin_" + pluginName, new Plugin( this, options ) ); } }); }; })( jQuery, window, document );

Related: See More


Questions / Comments: