CSS3 validation


/ Published in: CSS
Save to your folder(s)

CSS for form field validation


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.