Floating Label Forms

By Rafi

F6
#
How do I use This?

Form inputs and textareas with floating labels on focus. This makes the label seem like a placeholder and still shows the user what the context of the input is once focussed.

HTML
<form action="">
  <div class="row">
    <div class="small-12 column">
      <div class="form-floating-label">
        <input type="email" id="email" name="email" required>
        <label for="email">Email float up</label>
      </div>
    </div>
    <div class="small-12 column">
      <div class="form-floating-label">
        <input type="text" id="password" name="password">
        <label for="password">Float password up</label>
      </div>
    </div>
    <div class="small-12 column">
      <div class="form-floating-label">
        <input type="tel" id="tel" name="tel">
        <label for="tel">Float phone up</label>
      </div>
    </div>
    <div class="small-12 column">
      <div class="form-floating-label">
        <textarea name="" id="" rows="5" placeholder=""></textarea>
        <label for="textarea">Float textarea up</label>
      </div>
    </div>
  </div>
</form>

$highlight-color: dodgerblue;

.form-floating-label {
  position: relative;

  [type='text'],
  [type='password'],
  [type='date'],
  [type='datetime'],
  [type='datetime-local'],
  [type='month'],
  [type='week'],
  [type='email'],
  [type='number'],
  [type='search'],
  [type='tel'],
  [type='time'],
  [type='url'],
  [type='color'],
  textarea {
    margin-bottom: 0;
    color: $dark-gray;
    font-size: 18px;
    font-weight: 300;
    padding: 30px 1rem 1rem 25px;
  }

  label {
    color: $medium-gray;
    font-size: 18px;
    position: absolute;
    pointer-events: none;
    left: 25px;
    bottom: 0;
    transition: all 0.2s ease-in;
    font-weight: 300;
  }

  textarea ~ label {
    top: 20px;
    font-size: 18px;
    font-weight: 300;
  }

  /* active state */
  input:focus ~ label,
  input:disabled[value] ~ label,
  &.has-value input ~ label {
    top: 0;
    font-size: 14px;
    color: $highlight-color;
    font-weight: 400;
  }

  textarea:focus ~ label,
  &.has-value textarea ~ label {
    top: 0;
    font-size: 14px;
    color: $highlight-color;
    font-weight: 400;
  }
}








.form-floating-label {
  position: relative;
  
}

.form-floating-label [type='text'],
.form-floating-label [type='password'],
.form-floating-label [type='date'],
.form-floating-label [type='datetime'],
.form-floating-label [type='datetime-local'],
.form-floating-label [type='month'],
.form-floating-label [type='week'],
.form-floating-label [type='email'],
.form-floating-label [type='number'],
.form-floating-label [type='search'],
.form-floating-label [type='tel'],
.form-floating-label [type='time'],
.form-floating-label [type='url'],
.form-floating-label [type='color'],
.form-floating-label textarea {
  margin-bottom: 0;
  color: #8a8a8a;
  font-size: 18px;
  font-weight: 300;
  padding: 30px 1rem 1rem 25px;
}

.form-floating-label label {
  color: #cacaca;
  font-size: 18px;
  position: absolute;
  pointer-events: none;
  left: 25px;
  bottom: 0;
  transition: all 0.2s ease-in;
  font-weight: 300;
}

.form-floating-label textarea ~ label {
  top: 20px;
  font-size: 18px;
  font-weight: 300;
}

.form-floating-label input:focus ~ label,
.form-floating-label input:disabled[value] ~ label,
.form-floating-label.has-value input ~ label {
  top: 0;
  font-size: 14px;
  color: dodgerblue;
  font-weight: 400;
}

.form-floating-label textarea:focus ~ label,
.form-floating-label.has-value textarea ~ label {
  top: 0;
  font-size: 14px;
  color: dodgerblue;
  font-weight: 400;
}

JS
$('.form-floating-label input, .form-floating-label textarea').focusin(function(){
  $(this).parent().addClass('has-value');
});

$('.form-floating-label input, .form-floating-label textarea').blur(function(){
  if(!$(this).val().length > 0) {
    $(this).parent().removeClass('has-value');
  }
});