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