CodePen

HTML

            
              <html>
<head>
  <title>CSS Only Placeholder Labels</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <h1>Float Labels with Error Validation</h1>

  <form>
    <ol>
      <li class="fname">
        <span class="field">
          <input type="text" id="fname" placeholder="First Name" required />
          <label for="fName">First Name</label>
          <span class="error">Please enter your first name</span>
        </span>
      </li>
      <li class="lname">
        <span class="field">
          <input type="text" id="lName" placeholder="Last Name" required />
          <label for="lName">Last Name</label>
          <span class="error">Please enter your last name</span>
        </span>
      </li>
      <li class="address1">
        <span class="field">
          <input type="text" id="address" placeholder="Address" required />
          <label for="address">Address</label>
          <span class="error">Please enter a street address</span>
        </span>
      </li>
      <li class="address2">
        <span class="field">
          <input type="text" id="line2" placeholder="Apt" />
          <label for="line2">Apt</label>
        </span>
      </li>
      <li class="city">
        <span class="field">
          <input type="text" id="city" placeholder="City" required />
          <label for="city">City</label>          <span class="error">Please enter a city</span>
        </span>
      </li>
      <li class="state">
        <span class="field">
          <select id="state" required>
            <option value="">State</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="DC">District of Columbia</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NV">Nevada</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NM">New Mexico</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="ND">North Dakota</option>
            <option value="OH">Ohio</option>
            <option value="OK">Oklahoma</option>
            <option value="OR">Oregon</option>
            <option value="PA">Pennsylvania</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="SD">South Dakota</option>
            <option value="TN">Tennessee</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WA">Washington</option>
            <option value="WV">West Virginia</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
          </select>
          <label for="state">State</label>
          <span class="error">Please select a state</span>
        </span>
      </li>
      <li class="postal">
        <span class="field">
          <input type="text" id="postal" placeholder="ZIP Code" required />
          <label for="postal">ZIP Code</label>
          <span class="error">Please enter a zip code</span>
        </span>
      </li>
    </ol>
  </form>
</body>
</html>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              form { 
  overflow: visible;
}

/*
  Starting styles for each field
*/
.field {
  display: block;
  position: relative;
  height: 36px;
  border: solid #aaa;
  border-width: 2px 2px 0 2px;
}

.field label {
  max-height: 2px;
  overflow: hidden;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0 3px 0 10px;
  font-size: 11px;
  color: #aaa;
  background: #aaa;
}
.field input,
.field select {
  display: block;
  border: none;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  font-size: 13px; font-size: 1.3rem;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.field select.no-selection {
  color: #aaa;
}

/*
  Show label instead of placeholder
*/
.field input:focus,
.field select:focus {
  height: 25px
}
.field input:focus ~ label,
.field select:focus ~ label{
  color: #fff;
  max-height: 15px;
}

/*
  Show/hide error based on the :valid pseudo class
*/
.field.has-error {
  border-color: #de0046;
}
.field.has-error label {
  background-color: #de0046;
}

/* 
 Error bubble 
*/
.field .error {
  opacity: 0;
  z-index: 1;
  position: absolute;
  left: -1234em; /* hide off screen  */
  top: -1.8em;
  line-height: 1.8em;
  padding: 0 12px;
  margin-top: -15px;
  background: #de0046;
  color: #fff;
  min-width: 7em;
  white-space: nowrap;
  font-size: 14px;
}
/* Pointer */
.field .error:after {   
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0; 
  border-width: 0 0 10px 10px; 
  border-style: solid;
  border-color: transparent #de0046;
}
/* Show error bubble */
.field.has-error *:focus ~ .error {
  opacity: 1;
  left: 0;
}


/* Hide placeholder onfocus for safari */
.field input:focus[placeholder]::-webkit-input-placeholder {
  opacity: 0;
}

/*
  Transitions
*/
.field {
          transition-property: height, border-width, border-color;
  -webkit-transition-property: height, border-width, border-color;
     -moz-transition-property: height, border-width, border-color;

          transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
     -moz-transition-duration: 0.3s;

          transition-timing-function: ease-in;
  -webkit-transition-timing-function: ease-in;
     -moz-transition-timing-function: ease-in;
}
.field input,
.field select {
          transition: height 0.3s ease-in;
  -webkit-transition: height 0.3s ease-in;
     -moz-transition: height 0.3s ease-in;
}
.field label {
          transition-property: max-height, color, background-color;
  -webkit-transition-property: max-height, color, background-color;
     -moz-transition-property: max-height, color, background-color;

          transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
     -moz-transition-duration: 0.3s;

          transition-timing-function: ease-in;
  -webkit-transition-timing-function: ease-in;
     -moz-transition-timing-function: ease-in;
}

.field .error {
          transition: opacity 0.5s ease-in;
  -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
}

.field input[placeholder]::-webkit-input-placeholder {
          transition: opacity 0.3s ease-in;
  -webkit-transition: opacity 0.3s ease-in;
     -moz-transition: opacity 0.3s ease-in;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
$(document).ready(function(){
  
  /**
    Validate that a field is not empty.
    Add/remove has-error class from the field container.
  */
  function validateNotEmpty(){
    var field = $(this),
        container = field.parents('.field');
    
    if (!container.length) {
      return false;
    }
    
    if ($.trim(field.val()) != '') {
      container.removeClass('has-error');
      return true;
    } else {
      container.addClass('has-error');
      return false;
    }
  }
  
  // Validate on blur
  $('.field input, .field select').blur(validateNotEmpty);
  
  // If field has an error, validate as you type
  $('.field input').keypress(function(){
    var field = this,
        container = $(field).parents('.field');

    if (container.length && container.hasClass('has-error')) {
      //debugger;
      validateNotEmpty.call(field);
    }
  });
  
  // Support placeholders in IE8 via https://github.com/mathiasbynens/jquery-placeholder
  $('input, textarea').placeholder();
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................