Advanced Search

CSS3 validation

/ Published in: CSS
Save to your folder(s)
CSS for form field validation

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // the :invalid form field will display the following behavior
  2. input:invalid {
  3.   border-bottom: 2px solid #FC625D;
  4. }
  5.  
  6. // This is a special CSS target I like to use
  7. // to show only that the field in invalid when the user 
  8. // focuses on this specific field
  9. input:focus:invalid {
  10.   ~ .form-hint {
  11.     display: inline-block;
  12.   }
  13. }
  14.  
  15. // And now for a positive feedback validation
  16. input:valid {
  17.   border-bottom: 2px solid #35CE4A;
  18.  
  19.   + .glyphicon {
  20.     display: inline;
  21.   }
  22. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.