Floating-Labels.markdown

Floating Labels

Click the field and the label will scale down and move up. Looks fancy and more importantly the fields expected value is still crystal clear to the user.

Resources:

• https://github.com/jverdi/JVFloatLabeledTextField
• http://littlebigdetails.com/post/82478225432/circleci-once-activated-the-input-placeholders

A Pen by Rik Schennink on CodePen.

License.

index.html

<div class="form-item">
  <label for="user">Username</label>
  <input type="text" id="user" name="user">
</div>

<div class="form-item">
  <label for="pass">Password</label>
  <input type="password" id="pass" name="pass">
</div>

script.js

var i=0,inputs = document.querySelectorAll('input'),l=inputs.length;

for(;i<l;i++) {
  inputs[i].addEventListener('focus',function(){
    this.parentNode.classList.add('focus');
  },false);
  inputs[i].addEventListener('blur',function(){
    this.parentNode.classList.remove('focus');
    if (this.value.length>0) {
      this.parentNode.classList.add('data');
    }
    else {
      this.parentNode.classList.remove('data');
    }
  },false);
}

style.scss

@import "compass";
$focus: #06f;
$base: #999;

body {
  padding:6.5em 0 0 0;
  width:180px;
  margin:0 auto;
  font-family:Arial,sans-serif;
}

.form-item {
  
  position:relative;
  margin-bottom:.5em;
  
  // we'll handle the focus state ourselves
  input:focus {
    outline: none;
    box-shadow:inset 0 -.25em .5em lighten($focus, 45%);
  }

  label,input {
    display:inline-block;
    transition:all 150ms;
  }

  input {
    margin-top: 5px;
    padding: 6px 15px;
    border: 1px solid $base;
    border-radius: 16px;
    line-height: 20px;
    font-size: 14px;
    color: #222;
  }

  label {
    position:absolute;
    top:12px;
    left:17px;
    padding:0 2px;
    line-height:20px;
    font-size:14px;
    letter-spacing:.125em;
    color: $base;
    background:#fff;
    pointer-events:none;
    transform-origin:left center;
    transform:translateY(0) scale(1);
  }
  
  &.data label,
  &.focus label {
    transform:translateY(-17px) scale(0.75);
  }
  
  &.data label {
    color: $base;
  }

  &.focus {
    input {
      border-color: $focus;
    }
    label {
      color: $focus;
    }
  }
  
}