CSS3 form field validation

// the :invalid form field will display the following behavior
input:invalid {
  border-bottom: 2px solid #FC625D;
}
 
// This is a special CSS target I like to use
// to show only that the field in invalid when the user 
// focuses on this specific field
input:focus:invalid {
  ~ .form-hint {
    display: inline-block;
  }
}
 
// And now for a positive feedback validation
input:valid {
  border-bottom: 2px solid #35CE4A;
 
  + .glyphicon {
    display: inline;
  }
}

Source