CSS :invalid Pseudo Class

The CSS :invalid pseudo-class selects <form> and <fieldset> elements with a value that is invalid according to their settings.

The :invalid selector only works for form <input> elements with min and max attributes, email fields without a legal email, number fields without a numeric value or required fields with empty value.

Notes

Radio buttons

When one of the radio buttons in a group is required, the :invalid selector is applied to all of them (if all the buttons in the group are not selected). Grouped radio buttons have the same value for their name attribute.

Gecko defaults

By default, Gecko does not apply a style to the :invalid pseudo-class (however, we can apply a red "glow" with the box-shadow property) but applies style to the :-moz-ui-invalid pseudo-class, which applies in a subset of cases for :invalid pseudo-class.

Version

Selectors Level 4

Syntax

:invalid {
  css declarations;
}

Example of the :invalid selector:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input:invalid {
        border: 2px solid #ff0000;
      }
    </style>
  </head>
  <body>
    <h2>:invalid selector example</h2>
    <form>
      <input type="email" value="E-mail">
    </form>
  </body>
</html>

Browser support

chrome edge firefox safari opera
10.0+ 12.0+ 4.0+ 10.1+ 10.0+

Practice Your Knowledge

What is the function of the ':invalid' pseudo-class in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?