: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

HTML

<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>

CSS

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;

}

Result