A Pen by CantonBolo.

index.html

<form>
    <div class='input'>
      <input type="text" id='name' />
      <label for='name'>Your Name</label>
    </div>
    <div class='input'>
      <input type="text" id='address' />
      <label for='address'>Address</label>
  </div>
</form>

script.js

var inputs = document.getElementsByTagName('input'); 

for( i=0 ; i<inputs.length; i++ ) {
  var input = inputs[i];
  input.addEventListener('keyup',bindUI, false);
} 

function bindUI() {
  if( this.value ) {
   this.classList.add('not-empty');
  } else {
    this.classList.remove('not-empty');
  }
}

style.scss

@import "compass";
form{
  margin:5em;
  backface-visibility:hidden;
}

.input{
  position:relative;
  float:left;
  margin:10px;
}

input{
 border:1px solid #eee;
  padding:1em .5em;
  outline:none;
}

input + label
{ 
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  color:#aaa;
  transition:all .2s ease;
}

input:focus + label,
.not-empty + label{
  color:#52A5FB;
  font-size:.65em;
  top:8%;
  transform:none;
}

.not-empty + label{
  color:#aaa;
}

The Float Label Pattern.markdown

The Float Label Pattern

Bwuqa

A Pen by CantonBolo on CodePen.

License.