CodePen

HTML

            
              <form class="float-label" spellcheck="false">
  <legend>Float Label Demo</legend>
  
  <!-- we need a wrapping element for positioning the label -->
  <!-- the required attribute is ... required! -->
  <div class="control">
    <input type="text" name="title" placeholder="Title" required />
    <!-- yes, this is not nice, in real live, do it with JS -->
    <label for="title">Title</label>
  </div>
 
  <div class="control small">
    <input type="text" name="price" placeholder="Price" required />
    <label for="price">Price</label>
  </div>
  <div class="control medium">
    <input type="text" name="location" placeholder="Specific location (optional)" required />
    <label for="location">Specific location (optional)</label>
  </div>
  
  <div class="control">
    <textarea name="description" placeholder="Description" required></textarea>
    <label for="description">Description</label>
  </div>
  
</form>
            
          
!
via HTML Inspector

CSS

            
              @border: 1px solid #ddd;
@padding: 10px;
@label-font-size: 13px;

*,
*:before,
*:after {
	box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 300px;
}

// Demo styles
form {
  width: 600px;
  margin: 2em auto;
  
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 22px;
  
  legend {
    font-size: 2em;
    margin-bottom: 1em;
    width: 100%;
    border-bottom: @border;
  }
}


// float label
.float-label {
  .control {
    float: left;
    position: relative;
    width: 100%;
    border-bottom: @border;
    padding-top: @padding + @label-font-size;
    padding-bottom: @padding;
    
    // you proably want to replace these with your grid classes
    &.small {
      width: 30%;
      border-right: @border;
    }
    
    &.medium {
      width: 70%;
      padding-left: @padding;
    }
    
    &:last-child {
     border: 0;
    }
  }
  
  input, textarea {
    display: block;
    width: 100%;
    border: 0;
    outline: 0;
    resize: none;
    
    // inactive but shown label (exceptions: opacity and top)
    & + label {
      position: absolute;
      top: 10px;
      transition: top 0.7s ease, opacity 0.7s ease;
      opacity: 0;
      
      // Some nice styling
      font-size: @label-font-size;
      font-weight: 600;
      color: #ccc;
    }
    
    // THE MAGIC
    // as soon as we start typing, the "required" attribute will
    // set the state to valid and our pseudo selector will match
    &:valid + label {
      opacity: 1;
      top: 3px;
    }
    
    // and we highlight the focused input label
    &:focus + label {
      color: #2c8efe;
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Drawback 1: input and label have a semantically incoret order
// Drawback 2: you cannot use the full potential of html5 validation built in validation features like `<input type="email" />`
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................