Material design styled inputs with placeholders.

index.html

<div class="form-input">
  <label>
    <input required>
    <span class="placeholder">Text Input</span>
  </label>
</div>

<div class="form-input">
  <label>
    <textarea rows="10" required></textarea>
    <span class="placeholder">Textarea</span>
  </label>
</div>

index.less

@highlight-color: orange;
@placeholder-padding: 8px;
@placeholder-font-size: 16px;
@placeholder-font-size-small: 14px;
@placeholder-transition: 200ms ease-in-out;
@input-font-size: 16px;
@input-top: 15px;
@input-height: 30px;
@input-border-color: grey;
@wrapper-margin: 40px 0;

.form-input {
  margin: @wrapper-margin;
  width: 100%;

  label {
    position:relative;
    display:block;
    width:100%;
    min-height:@input-height + @input-top;
  }

  .placeholder {
    position:absolute;
    display:block;
    top:(@input-height / 2) + @placeholder-padding;
    z-index:2;
    font-size:@placeholder-font-size;
    transition:all @placeholder-transition;
    width:100%;
    cursor:text;
  }

  input, textarea {
    position:absolute;
    top:@input-top;
    z-index:1;
    width:100%;
    font-size:@input-font-size;
    border:0;
    border-bottom:1px solid @input-border-color;
    transition: border-color @placeholder-transition;
    outline:none;
    padding: 0;
    margin: 0;
  }
  
  textarea {
    min-height:@input-height;
    padding: @placeholder-padding 0;
  }
  
  input {
    height:@input-height; 
  }

  input:focus,
  input:valid,
  textarea:focus,
  textarea:valid {
    & + .placeholder {
      top:0;
      cursor:inherit;
      font-size:@placeholder-font-size-small;
      color:@highlight-color;
    }

    border-bottom:2px solid @highlight-color;
  }
}