"Float Label Pattern Forms"
Bootstrap 3.1.0 Snippet by travislaynewilson

<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"> <div class="row"> <h2>Float Label Pattern Forms</h2> <p class="lead"> This new pattern transforms Bootstrap's form fields into modern, fun and user-friendly experiences!<br /> <small class="text-muted">Learn more about this pattern at <a href="http://bradfrostweb.com/blog/post/float-label-pattern/" target="blank">http://bradfrostweb.com/blog/post/float-label-pattern/</a></small> </p> <div class="alert alert-warning"> <h4>Missing SELECT Support</h4> This feature does not currently support SELECT tags - I'm still working out a way to make them work with Bootstrap's native examples. </div> <hr /> <div class="row"> <div class="col-sm-8"> <h4 class="page-header">Default Implementation</h4> <form role="form"> <div class="form-group float-label-control"> <label for="">Username</label> <input type="email" class="form-control" placeholder="Username"> </div> <div class="form-group float-label-control"> <label for="">Password</label> <input type="password" class="form-control" placeholder="Password"> </div> <div class="form-group float-label-control"> <label for="">Textarea</label> <textarea class="form-control" placeholder="Textarea" rows="1"></textarea> </div> </form> <h4 class="page-header">Bottom Labels</h4> <form role="form"> <div class="form-group float-label-control label-bottom"> <label for="">Username</label> <input type="email" class="form-control" placeholder="Username"> </div> </form> <h4 class="page-header">Placeholder Overrides</h4> <form role="form"> <div class="form-group float-label-control"> <label for="">Email Address</label> <input type="email" class="form-control" placeholder="What's your email address?"> </div> </form> </div> <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> Features </h3> </div> <div class="panel-body"> <ul> <li>Very customizable</li> <li>Works with Bootstrap's native form examples</li> <li>Uses CSS transitions for fallback browser support</li> <li>Placeholder override for labels when fields are empty</li> <li>Included authored jQuery plugin</li> <li>Optional bottom label positioning with the <code>.label-bottom</code> utility</li> <li>Works great with Chrome's AutoComplete</li> </ul> </div> </div> </div> </div> </div> </div>
.float-label-control { position: relative; margin-bottom: 1.5em; } .float-label-control ::-webkit-input-placeholder { color: transparent; } .float-label-control :-moz-placeholder { color: transparent; } .float-label-control ::-moz-placeholder { color: transparent; } .float-label-control :-ms-input-placeholder { color: transparent; } .float-label-control input:-webkit-autofill, .float-label-control textarea:-webkit-autofill { background-color: transparent !important; -webkit-box-shadow: 0 0 0 1000px white inset !important; -moz-box-shadow: 0 0 0 1000px white inset !important; box-shadow: 0 0 0 1000px white inset !important; } .float-label-control input, .float-label-control textarea, .float-label-control label { font-size: 1.3em; box-shadow: none; -webkit-box-shadow: none; } .float-label-control input:focus, .float-label-control textarea:focus { box-shadow: none; -webkit-box-shadow: none; border-bottom-width: 2px; padding-bottom: 0; } .float-label-control textarea:focus { padding-bottom: 4px; } .float-label-control input, .float-label-control textarea { display: block; width: 100%; padding: 0.1em 0em 1px 0em; border: none; border-radius: 0px; border-bottom: 1px solid #aaa; outline: none; margin: 0px; background: none; } .float-label-control textarea { padding: 0.1em 0em 5px 0em; } .float-label-control label { position: absolute; font-weight: normal; top: -1.0em; left: 0.08em; color: #aaaaaa; z-index: -1; font-size: 0.85em; -moz-animation: float-labels 300ms none ease-out; -webkit-animation: float-labels 300ms none ease-out; -o-animation: float-labels 300ms none ease-out; -ms-animation: float-labels 300ms none ease-out; -khtml-animation: float-labels 300ms none ease-out; animation: float-labels 300ms none ease-out; /* There is a bug sometimes pausing the animation. This avoids that.*/ animation-play-state: running !important; -webkit-animation-play-state: running !important; } .float-label-control input.empty + label, .float-label-control textarea.empty + label { top: 0.1em; font-size: 1.5em; animation: none; -webkit-animation: none; } .float-label-control input:not(.empty) + label, .float-label-control textarea:not(.empty) + label { z-index: 1; } .float-label-control input:not(.empty):focus + label, .float-label-control textarea:not(.empty):focus + label { color: #aaaaaa; } .float-label-control.label-bottom label { -moz-animation: float-labels-bottom 300ms none ease-out; -webkit-animation: float-labels-bottom 300ms none ease-out; -o-animation: float-labels-bottom 300ms none ease-out; -ms-animation: float-labels-bottom 300ms none ease-out; -khtml-animation: float-labels-bottom 300ms none ease-out; animation: float-labels-bottom 300ms none ease-out; } .float-label-control.label-bottom input:not(.empty) + label, .float-label-control.label-bottom textarea:not(.empty) + label { top: 3em; } @keyframes float-labels { 0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; } 20% { font-size: 1.5em; opacity: 0; } 30% { top: 0.1em; } 50% { opacity: 0; font-size: 0.85em; } 100% { top: -1em; opacity: 1; } } @-webkit-keyframes float-labels { 0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; } 20% { font-size: 1.5em; opacity: 0; } 30% { top: 0.1em; } 50% { opacity: 0; font-size: 0.85em; } 100% { top: -1em; opacity: 1; } } @keyframes float-labels-bottom { 0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; } 20% { font-size: 1.5em; opacity: 0; } 30% { top: 0.1em; } 50% { opacity: 0; font-size: 0.85em; } 100% { top: 3em; opacity: 1; } } @-webkit-keyframes float-labels-bottom { 0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; } 20% { font-size: 1.5em; opacity: 0; } 30% { top: 0.1em; } 50% { opacity: 0; font-size: 0.85em; } 100% { top: 3em; opacity: 1; } }
/* Float Label Pattern Plugin for Bootstrap 3.1.0 by Travis Wilson **************************************************/ (function ($) { $.fn.floatLabels = function (options) { // Settings var self = this; var settings = $.extend({}, options); // Event Handlers function registerEventHandlers() { self.on('input keyup change', 'input, textarea', function () { actions.swapLabels(this); }); } // Actions var actions = { initialize: function() { self.each(function () { var $this = $(this); var $label = $this.children('label'); var $field = $this.find('input,textarea').first(); if ($this.children().first().is('label')) { $this.children().first().remove(); $this.append($label); } var placeholderText = ($field.attr('placeholder') && $field.attr('placeholder') != $label.text()) ? $field.attr('placeholder') : $label.text(); $label.data('placeholder-text', placeholderText); $label.data('original-text', $label.text()); if ($field.val() == '') { $field.addClass('empty') } }); }, swapLabels: function (field) { var $field = $(field); var $label = $(field).siblings('label').first(); var isEmpty = Boolean($field.val()); if (isEmpty) { $field.removeClass('empty'); $label.text($label.data('original-text')); } else { $field.addClass('empty'); $label.text($label.data('placeholder-text')); } } } // Initialization function init() { registerEventHandlers(); actions.initialize(); self.each(function () { actions.swapLabels($(this).find('input,textarea').first()); }); } init(); return this; }; $(function () { $('.float-label-control').floatLabels(); }); })(jQuery);

Related: See More


Questions / Comments:

Hi everyone, I'm doing an internship and I need help to config a select box with this float label, but it doesn't work.

any suggestion?

Nádia Bridge () - 1 year ago - Reply 0


Thanks for sharing, the placeholder text wasn't appearing for me in Firefox however if you target the input example:
#inp-first_name::placeholder { color: #333 };

I have no tried the listed solution in the comments, but this worked for me.

The text appears now fine :)

Lewis La Payne () - 2 years ago - Reply 0


I cant seem to get any of my floating labels to work i've tired a'lot of frameworks now with this one i have gotten closer than the others but on the form it shows the label that is supposed to appear after the user starts typing already any help? fyi this occurs using the exact same HTML, CSS and JS with the commented out lines in the css 2-5

Isaac Leshaba () - 2 years ago - Reply 0


Is there another file I should Include or something that I should change in the existing
files?

Isaac Leshaba () - 2 years ago - Reply 0


Thank you! This page / any page that I use this on is crashing on my ipad. It is working fine on my android phone, but cant seem to load it on an apple device. Desktop safari is fine, but ipads/phones is not. Help?

THIS WAS RESOLVED http://stackoverflow.com/qu...

KristineIbay () - 3 years ago - Reply 0


Interesting... What version of iPad/iOS do you have? Maybe @travislayne:disqus could help out?

maxsurguy () - 3 years ago - Reply 0


I also need to add select control and date picker also any update on using these 2 components

Gaurav Shrivastav () - 3 years ago - Reply 0


I love this way of form patterns, apart from input text fields & textarea, i also need to add datapicker and select control using same pattern... any update on this..

Gaurav Shrivastav () - 3 years ago - Reply 0


me too, did you get it ? I did with a datepicker but I cant solve the problem with a select option :\

nadiabridge () - 1 year ago - Reply 0


This is not working on iPhone Safari because of this issue http://stackoverflow.com/qu...

Jitendra Vyas () - 3 years ago - Reply 0


How to move label to above on focus?

Jitendra Vyas () - 3 years ago - Reply 0


What about error messages?

Jitendra Vyas () - 3 years ago - Reply 0


I noticed when I put a background color behind the form the placeholder text no longer appears. Has anyone else encountered the same problem?

Mario () - 3 years ago - Reply 0


Great !

Николай () - 4 years ago - Reply 0


Wow, really great. However there is a bug when using this inside of Tabs. (webkit, maybe also firefox)
The Labels will fade size.

_any () - 4 years ago - Reply 0


did you think about the input of type dropdown list in your code ??????? may be you need to update your code ???

Kobalt () - 4 years ago - Reply 0


I did think about it, as noted in the alert in the preview, but I have not found a clean way to do this pattern in SELECT fields using only pure CSS. I didn't want to force the sample to use a third-party plugin to support it.

When, and if, I find a browser-safe solution for SELECT fields, I'll update my sample.

Travis Layne () - 4 years ago - Reply 0


Travis, check this out!

https://github.com/tonystar...

Pure-CSS implementation and works with select-s!

Anton Staroverov () - 2 years ago - Reply 0


PUT THiS ON GIT !!!

For real () - 4 years ago - Reply 0


this is awesome..

jmansurf () - 5 years ago - Reply 0


wow i love it! great job

Steve Bourgoin () - 5 years ago - Reply 0


I really like this, but for some reason the placeholder text isn't appearing, except for a moment when I start typing. Anyone experience this?

Callum West () - 5 years ago - Reply 0


comment lines 2-5 ine css

/* .float-label-control ::-webkit-input-placeholder { color: transparent; }

.float-label-control :-moz-placeholder { color: transparent; }

.float-label-control ::-moz-placeholder { color: transparent; }

.float-label-control :-ms-input-placeholder { color: transparent; }*/

Rilwanrabo () - 4 years ago - Reply 0


thanks it works

Galih Pratama () - 4 years ago - Reply 0


I am facing the same problem on safari 7.0.3, any suggestions?

Stephan () - 5 years ago - Reply 0


what browser are you using?

maxsurguy () - 5 years ago - Reply 0


Chrome Version 33.0.1750.152

Callum West () - 5 years ago - Reply 0


On Windows?

maxsurguy () - 5 years ago - Reply 0


On OSX 10.8

Callum West () - 5 years ago - Reply 0


I'm curious - is your browser auto-filling the fields on load?

Travis Layne () - 5 years ago - Reply 0


it's not auto-filling on load, no.

Callum West () - 5 years ago - Reply 0


good work! cheers!!!

Rilwanrabo () - 5 years ago - Reply 0