CSS :invalid Selector

.example:invalid {
  border: 1px solid red;
}

Meaning

The :invalid selector selects any <form>, <fieldset>, <input> or other <form> element whose contents fail to validate.

The :invalid pseudo-class is useful for highlighting field errors for the user.

Version: CSS3

Standard Syntax

:invalid {
  css declarations;
}

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

More Example

Styling :invalid and :valid selectors:

input:valid {
  border: 4px solid green;
}

input:invalid {
  border: 4px solid red;
}