: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
Explorer Edge Chrome Firefox Opera Safari
1012104105
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
3718410.151.0