<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">
<h2>Float Label</h2>
<div class="alert alert-info">
<p>
This works with select box by transforming them into dropdown build with ul and li elements, however still custom evets handling are required.
Anyone who would like to modifiy this is welcome. you can find the source code at <a href="https://github.com/codeg8/float-label">Github</a>
</p>
</div>
<form role="form">
<div class="form-group float-label-control">
<label for="">Username</label>
<input type="email" class="form-control" placeholder="Username" name="someNewField">
</div>
<div class="form-group float-label-control">
<label for="">Password</label>
<input type="password" class="form-control" placeholder="Password" name="someNewPassowrd">
</div>
<div class="form-group float-label-control">
<label for="">Textarea</label>
<textarea class="form-control" placeholder="Textarea" rows="1"></textarea>
</div>
<div class="form-group float-label-control" id="select-field">
<label for="">Country</label>
<select class="form-control" id="country-list">
<option value="AU" data-icon="flag-icon flag-icon-au">Austraila</option>
<option value="CH" data-icon="flag-icon flag-icon-ch">China</option>
<option value="IN" data-icon="flag-icon flag-icon-in">India</option>
<option value="PK" data-icon="flag-icon flag-icon-pk">Pakistan</option>
<option value="RS" data-icon="flag-icon flag-icon-rs">Russia</option>
<option value="AE" data-icon="flag-icon flag-icon-ae">United Arab Emirates</option>
<option value="GB" data-icon="flag-icon flag-icon-gb">United Kingdom</option>
<option value="US" data-icon="flag-icon flag-icon-us">United States of America</option>
<option value="ZM" data-icon="flag-icon flag-icon-zm">Zimbawe</option>
</select>
</div>
</form>
</div>
</div>
/**
*
* Float label Style
*
*/
.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.2em; /*left: 0.08em;*/ color: #aaaaaa; z-index: -1; font-size: 0.85em; -moz-animation: float-labels 200ms none ease-out; -webkit-animation: float-labels 200ms none ease-out; -o-animation: float-labels 200ms none ease-out; -ms-animation: float-labels 200ms none ease-out; -khtml-animation: float-labels 200ms none ease-out; animation: float-labels 200ms 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: #66afe9; }
.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; }
.float-label-control ul.select-dropdown {width: 100% !important; max-height: 150px; overflow:auto;}
.float-label-control ul.select-dropdown.show {display: block !important;}
.float-label-control ul.select-dropdown li a{padding-top: 4px; padding-bottom: 4px; border-bottom: 1px solid #d3d3d3}
.float-label-control ul.select-dropdown li a:hover{font-weight: bolder;}
.float-label-control ul.select-dropdown li a.hide{display: none;}
@keyframes float-labels {
0% { color: #aaa; top: 0.1em; font-size: 1.5em; }
/*10% { top: -0.1em; font-size: 1.43em; }*/
20% { top: -0.3em; font-size: 1.37em;}
/*30% { top: -0.3em; font-size: 1.30em;}*/
/*40% { top: -0.4em; font-size: 1.23em;}*/
50% { top: -0.6em; font-size: 1.16em;}
/*60% { top: -0.6em; font-size: 1.09em;}*/
/*70% { top: -0.7em; font-size: 1.02em;}*/
80% { top: -1.0em; font-size: 0.95em;}
/*90% { top: -0.9em; font-size: 0.88em;}*/
100% { top: -1.2em; font-size: 0.85em;}
}
@-webkit-keyframes float-labels {
0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
20% { font-size: 2.5em; opacity: 1; }
30% { top: 0.1em; font-size: 2.5em; opacity: 1; }
40% { top: 0.1em; font-size: 2.5em; opacity: 1; }
50% { top: 0.1em; font-size: 2.5em; opacity: 1; }
60% { top: 0.1em; font-size: 2.5em; opacity: 1; }
70% { top: 0.1em; font-size: 2.5em; opacity: 1; }
80% { top: 0.1em; font-size: 2.5em; opacity: 1;}
90% { top: 0.1em; font-size: 2.5em; opacity: 1;}
100% { top: -1em; opacity: 1; }
}
@keyframes float-labels-bottom {
0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
20% { font-size: 2.5em; opacity: 1; }
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: 2.5em; opacity: 1; }
30% { top: 0.1em; }
50% { opacity: 0; font-size: 0.85em; }
100% { top: 3em; opacity: 1; }
}
(function ($) {
$.fn.floatLabels = function (options) {
// Settings
var self = this;
var settings = $.extend({}, options);
// Event Handlers
function registerEventHandlers() {
// self.on('input keyup change focus', 'input, textarea', function () {
// actions.swapLabels(this);
// });
self.on('focusin', 'input, textarea', function () {
actions.addFocus(this);
});
self.on('focusout', 'input, textarea', function () {
actions.removeFocus(this);
});
self.on('mousedown', '.select-dropdown li a', function(){
actions.selectValue(this);
});
self.on('keyup', 'select + input', function(){
actions.dropdownFilter(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')
}
});
},
changeSelectFields: function () {
self.each(function () {
var $this = $(this);
// console.log($this);
var $selectFields = $this.find('select');
//console.log($selectFields.length);
if ($selectFields.length){
$selectFields.hide();
$selectedFieldID = $selectFields.attr('id');
$selectFields.after('<input type="text" class="form-control replaced-select-field" id="'+$selectedFieldID+'-styled">');
$options = $selectFields.find('option');
$styledElements = Array();
$options.each(function($i, $option){
$icon = $option.getAttribute('data-icon');
$icon = ($icon) ? '<i class="'+ $icon +'"></i> ' : '';
$html = '<li>'+
'<a href="#" data-option="'+$option.value+'">'+
$icon + $option.text
'</a>'+
'</li> '
$styledElements.push($html);
});
$styledElements ='<ul class="dropdown-menu select-dropdown" id="'+$selectedFieldID+'-dropdown">' + $styledElements.join(' ') + '</ul>' ;
$this.append($styledElements)
}
});
},
selectValue: function(dropdown_elemet){
$dropdown_elemet = $(dropdown_elemet);
$relatedSelectFiled = $dropdown_elemet.parents('.select-dropdown').siblings('select');
$relatedInputFiled = $dropdown_elemet.parents('.select-dropdown').siblings('input');
$relatedSelectFiled.val($dropdown_elemet.data('option'));
$relatedInputFiled.val($.trim($dropdown_elemet.text()));
},
dropdownFilter: function(inputField){
$inputField = $(inputField);
$relatedDDField = $inputField.siblings('.select-dropdown');
$options = $relatedDDField.find('a');
$options.each(function(i, option){
$option = $(option);
if($.trim($option.text().toLowerCase()).search($.trim($inputField.val()).toLowerCase()) === -1){
$option.addClass('hide');
}else{
$option.removeClass('hide');
}
});
},
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'));
}
},
addFocus: function (field) {
var $field = $(field);
var $label = $(field).siblings('label').first();
// var isEmpty = Boolean($field.val());
$field.removeClass('empty');
$label.text($label.data('original-text'));
if($field.hasClass('replaced-select-field')){
$field.siblings('ul.select-dropdown').addClass('show');
}
},
removeFocus: 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('placeholder-text'));
}else{
$field.addClass('empty');
$label.text($label.data('original-text'));
}
if($field.hasClass('replaced-select-field')){
$field.siblings('ul.select-dropdown').removeClass('show');
}
}
};
// Initialization
function init() {
registerEventHandlers();
actions.initialize();
actions.changeSelectFields();
self.each(function () {
actions.swapLabels($(this).find('input,textarea').first());
});
}
init();
return this;
};
})(jQuery);
$(function () {
$('.float-label-control').floatLabels();
});
