Advanced Search

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