:invalid Back

• :invalid is a CSS pseudo-class used to select and style form <input> elements whose value is invalid according to its type specified in the type attribute.
• For example, number input types (<input type="number">) that have an alphabet character value, or email inputs (<input type="email">) whose value does not match a valid email address pattern.
• In some browsers, :invalid also matches a form (<form>) and a fieldset (<fieldset>) that have one or more input elements that have invalid values according to their type value.

Case: learning :invalid

See the Pen ZQazoL by aleen42 (@aleen42) on CodePen.

Note

• When a number input type (<input type="number">) is out of the range of permitted values specified using the min and max attributes, then the :invalid pseudo-class matches, and also the :out-of-range pseudo-class matches. Any styles applied using :out-of-range will override the styles applied using :invalid.
• The :invalid pseudo-class also applied to all of the buttons in a group of radio buttons (they have the same name attribute value) if one of the buttons is required (has the required attribute) but none of the buttons in the group is selected.
• Using :invalid to select a form that has an invalid input currently only works in Firefox 13+.
  • In Firefox, by default, Gecko does not apply a style to the :invalid pseudo-class. However it does apply a style (a red "glow" using the box-shadow property) to the :-moz-ui-invalid pseudo-class, which applies in a subset of cases for :invalid.

:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}