The :valid selector selects form elements with a value that validates according to the element's settings. Note: The :valid selector only works for form elements with limitations, such as input elements with min and max attributes, email fields with a legal email, or number fields with a numeric value, etc. For this example, the :valid selector will select and style only if the value of the <input> element is valid:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
input:valid { background-color: yellow; } </style> <body> <h3>A demonstration of the :valid selector.</h3> <input type="email" value="[email protected]"> <p>Try typing an illegal e-mail address, to see the styling disappear.</p> </body> |
A demonstration of the :valid selector.Try typing an illegal e-mail address, to see the styling disappear. |
Use the :invalid selector to select form elements with a value that does not validate according to the element's settings. Note: The :valid selector is not supported in Internet Explorer 9 and earlier versions.
