<label>
  <input type="text" required />
  <div class="label-text">First name</div>
</label>

@import "compass"

$mineShaft: #333333
$tundora: #4A4A4A
$dustyGray: #9B9B9B
$gallery: #F0F0F0

body
  background-color: $mineShaft
  font-family: 'Open Sans', Helvetica

label
  display: block
  letter-spacing: 4px
  padding-top: 30px
  text-align: center

  .label-text
    color: $dustyGray
    cursor: text
    font-size: 20px
    line-height: 20px
    text-transform: uppercase
    +transform(translateY(-34px))
    transition: all 0.3s
    
  input
    background-color: transparent
    border: 0
    border-bottom: 2px solid $tundora
    color: white
    font-size: 36px
    letter-spacing: -1px
    outline: 0
    padding: 5px 20px
    text-align: center
    transition: all 0.3s
    width: 200px
    
    &:focus 
      width: 400px
    
      & + .label-text
        color: $gallery
        font-size: 13px
        +transform(translateY(-74px))
      
    &:valid + .label-text
      font-size: 13px
      +transform(translateY(-74px))
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js