:valid CSS Pseudo Class
Description
The :valid pseudo-class applies to form fields whose contents are checked in the browser for compliance with the specified type. For example, for type="number" you enter a number, not letters, for type="email" the correct email address.
Syntax
element:valid { ... }
Example
<p>URL</p>
<p><input type="url" required></p>
<p>Email</p>
<p><input type="email" required></p>
<p><input type="submit" value="Submit"></p>input[type=url]:invalid, input[type=email]:invalid {
background: #fdd;
padding: 3px 10px;
}
input[type=url]:valid, input[type=email]:valid {
background: #dfd;
padding: 3px 10px;
} Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| 10 | 12 | 10 | 4 | 10 | 5 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 37 | 18 | 4 | 10.1 | 5 | 1.0 |