Material Floating Labels

by gangadharjannu

HTML

<link rel="stylesheet" href="http://bootswatch.com/paper/bootstrap.css">
<div class="form-group">
  <label class="control-label" for="inputNormal">Normal input</label>
  <input type="text" class="form-control" id="inputNormal" placeholder="Placeholder text" />
</div>

<div class="form-group has-warning">
  <label class="control-label" for="inputWarning">Warning input</label>
  <input type="text" class="form-control" id="inputWarning" placeholder="Placeholder text" />
</div>

CSS

body {
  padding: 20px;
}


/* --- material floating label --- */

.form-group {
  display: flex;
  height: 55px;
}

.control-label {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  transform: translate3d(0, 22px, 0) scale(1);
  transform-origin: left top;
  transition: 240ms;
}

.form-group.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
}

.form-control {
  align-self: flex-end;
}

.form-control::-webkit-input-placeholder {
  color: transparent;
  transition: 240ms;
}

.form-control:focus::-webkit-input-placeholder {
  transition: none;
}

.form-group.focused .form-control::-webkit-input-placeholder {
  color: #bbb;
}

JavaScript

$('.form-control').on('focus blur', function(e) {
  $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');