Valid Elements with :valid

The :valid selector matches input elements that are valid based on input validation.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style> 
        :invalid { 
            outline: medium solid red; 
        } 
        :valid { 
            outline: medium solid green; 
        } 
        </style> 
    </head> 
    <body> 
        <form method="post" action="http://yourServer/form"> 
            <p> 
                <label for="name">Name: <input required id="name" name="name"/></label> 
            </p> 
            <p> 
                <label for="name">City: <input required id="city" name="city"/></label> 
            </p> 
            <button type="submit">Submit</button> 
        </form> 
    </body> 
</html>
  
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Pseudo Selectors:
  1. ::first-line Selector
  2. ::first-letter Selector
  3. :before Selector
  4. :after Selector
  5. CSS Counter Feature
  6. :root Selector
  7. Child Selectors
  8. :first-child Selector
  9. :last-child Selector
  10. :only-child Selector
  11. :only-of-type selector
  12. :nth-child(n)
  13. :nth-last-child(n)
  14. :nth-of-type(n)
  15. :nth-last-of-type(n)
  16. Enabled Elements with :enabled
  17. Disabled Elements with :disabled
  18. Checked Elements with :check
  19. Default Elements with :default
  20. Valid Elements with :valid
  21. Invalid input Elements with :invalid
  22. :in-range selector
  23. :out-of-range selector
  24. :required selector
  25. :optional selector
  26. :link selector matches hyperlinks.
  27. :visited selector matches visited hyperlinks.
  28. :hover Selector
  29. :active Selector
  30. :focus Selector
  31. Negation Selector not
  32. :empty Selector
  33. :lang Selector
  34. :target Selector
Related: