CodePen

HTML

            
              <form class="go-bottom">
  <h2>To Bottom</h2>
  <div>
    <input placeholder="First + Last" id="name" name="name" type="text" required>
    <label for="name">Your Name</label>
  </div>
  <div>
    <input placeholder="555-555-5555" id="phone" name="phone" type="tel" required>
    <label for="phone">Primary Phone</label>
  </div>
  <div>
    <textarea placeholder="What do you want us to tell you?" id="message" name="phone" required></textarea>
    <label for="message">Message</label>
  </div>
</form>


            
          
!

CSS

            
              * {
  box-sizing: border-box;
}

html {
  font: 14px/1.4 Sans-Serif;
}

form {
  width: 320px;
  float: left;
  margin: 20px;
  > div {
    position: relative;
    overflow: hidden;
  }
  input, textarea {
    width: 100%;
    border: 2px solid gray; 
    background: none;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 8px 12px;
    outline: 0;
    &:valid {
      // Hides the label
      background: white; 
    }
    &:focus {
      border-color: #f06d06;
    }
    &:focus + label {
      background: #f06d06;
      color: white;
      font-size: 70%;
      padding: 1px 6px;
      z-index: 2;
      text-transform: uppercase;
      -webkit-animation: go-up 200ms linear;
      -webkit-animation-fill-mode: forward;
    }
  }
  label {

    position: absolute;
    color: #999;
    padding: 7px 6px;
  }
  textarea {
    display: block;
    resize: vertical;
  }
}

form.go-bottom {
  input, textarea {
    padding: 12px 12px 12px 12px; 
  }
  label {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  input:focus, textarea:focus {
    padding: 4px 6px 20px 6px; 
  }
  input:focus + label, textarea:focus + label {
    top: 100%;
    margin-top: -16px;
  }
}
@-webkit-keyframes go-up {
  0% {
    top: auto;
    bottom: -16px;
  }
  100% {
    top: auto;
    bottom: 0;
  }
}

@-moz-keyframes go-up {
  0% {
    top: auto;
    bottom: -16px;
  }
  100% {
    top: auto;
    bottom: 0;
  }
}

@keyframes go-up {
  0% {
    top: auto;
    bottom: -16px;
  }
  100% {
    top: auto;
    bottom: 0;
  }
}


::-webkit-input-placeholder {
  color: red;
}

:-moz-placeholder { /* Firefox 18- */
  color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
  color: red;  
}


// and the placeholder trick --------------------
// via http://css-tricks.com/snippets/css/style-placeholder-text/
$prefixes: '::-webkit-input' ':-ms-input' ':-moz' '::-moz';

@each $p in $prefixes {
  #{$p}-placeholder { color: transparent; }
input:focus#{$p}-placeholder { color: gray; }
textarea:focus#{$p}-placeholder { color: gray; }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................