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

Initial Language