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>

<form class="go-right">
  <h2>To Right</h2>
  <div>
    <input placeholder="Who you?" id="name" name="name" type="text" required>
    <label for="name">Your Name</label>
  </div>
  <div>
    <input placeholder="How can I call you?" id="phone" name="phone" type="tel" required>
    <label for="phone">Primary Phone</label>
  </div>
  <div>
    <textarea placeholder="What's up?" 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;
    }
  }
  label {
    transition: // not padding
      background 0.2s,
      color 0.2s,
      top 0.2s,
      bottom 0.2s,
      right 0.2s,
      left 0.2s;
    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;
  }
}
form.go-right {
  label {
    top: 2px;
    right: 100%;
    width: 100%;
    margin-right: -100%;
    bottom: 2px;
  }
  input:focus + label, textarea:focus + label {
    right: 0;
    margin-right: 0;
    width: 40%;
    padding-top: 5px;
  }
}


::-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 ..................