Return to Snippet

Revision: 70393
at February 2, 2016 12:02 by fcommisso


Initial Code
// 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;
  }
}

Initial URL


Initial Description
CSS for form field validation

Initial Title
CSS3 validation

Initial Tags
CSS3

Initial Language
CSS