<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,
.float-label-control :-moz-placeholder,
.float-label-control ::-moz-placeholder,
.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;
-o-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;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
.float-label-control input:focus,
.float-label-control textarea:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
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 0 1px 0;
border: none;
border-radius: 0;
border-bottom: 1px solid #aaa;
outline: none;
margin: 0;
background: none;
}
.float-label-control textarea {
padding: 0.1em 0 5px 0;
}
.float-label-control label {
position: absolute;
font-weight: normal;
top: -1.0em;
left: 0.08em;
color: #aaa;
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;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
-khtml-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;
}
}
@-o-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;
}
}
@-o-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);
