: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

HTML

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

CSS

input {

   background: #b4f7ab;

   border: 1px solid #06bca7;

   padding: 3px 10px;

}

input:invalid {

   background: #fc9cac;

   border: 1px solid #bc0624;

}

Result