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