http://designbored.herokuapp.com/#label-shows-up-when-placeholder-disappears

html_label-shows-up-when-placeholder-disappears.html

<div class="input">
  <input id="foo" placeholder="Foo">
  <label for="foo">Foo</label>
</div>

<div class="input">
  <input id="bar" placeholder="Bar">
  <label for="bar">Bar</label>
</div>

js_label-shows-up-when-placeholder-disappears.js

<script type="text/javascript">$(function() {
  $('input').keyup(function(){
    label = $('label[for="'+this.id+'"]')
    if( !this.value ) {
      label.removeClass('filled')
    }
    else{
      label.addClass('filled')
    }
  })
});</script>

style_label-shows-up-when-placeholder-disappears.css

.input {
  position: relative;
}

.input label {
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 11px;
}

.input label.filled {
  opacity: 1;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  top: -3px;
  -webkit-transition-property: top;
  -moz-transition-property: top;
  -o-transition-property: top;
  transition-property: top;
}

.input input {
  border: 0;
  border-bottom: 1px solid #bbbbbb;
  outline: none;
  margin: 10px 0px;
  font-size: 15px;
}

.input input:focus + label {
  color: blue;
}

style_label-shows-up-when-placeholder-disappears.sass

.input
  position: relative

  label
    opacity: 0
    position: absolute
    top: 0px
    left: 0px
    font-size: 11px
    &.filled
      opacity: 1
      +transition-property(opacity)
      +transition-duration(0.3s)
      top: -3px
      +transition-property(top)

  input
    border: 0
      bottom: 1px solid #bbb
    outline: none
    margin: 10px 0px
    font-size: 15px
    &:focus + label
      color: blue