:invalid CSS Pseudo Class
Description
The :invalid pseudo-class applies to form fields whose contents do not match the specified type. For example, for type = "number" a number should be entered, not letters, for type = "email" the correct email address should be entered.
Syntax
input:invalid { ... }
Example
<p>Input should be a url address.</p>
<input type="url">
<p>Input should be an email address.</p>
<input type="email">
<p>Input should be a number.</p>
<input type="number">
input {
background: #b4f7ab;
border: 1px solid #06bca7;
padding: 3px 10px;
}
input:invalid {
background: #fc9cac;
border: 1px solid #bc0624;
}Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| 10 | 12 | 10 | 4 | 10 | 5 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 37 | 18 | 4 | 10.1 | 5 | 1.0 |
Last updated by CSSPortal on: 25th November 2019
CSS Pseudo Elements
CSS Pseudo Classes
- :active
- :checked
- :default
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited