:invalid

:invalid is a pseudo-class selector that enables styling on invalid form elements. :invalid can be added to any form elements, such as form, fieldset, or input, to enhance styling based on the validity of an element, or a contained child element.

form:invalid {
  outline: 3px dashed red;
}

Syntax

:invalid {
  /* ... */
}

Though syntactically similar for all form elements, validation differs slightly between form, fieldset, and input. We’ll spend time exploring those differences in the following sections.

Forms

form elements enable conditional styling using :invalid based on the validity of child form elements, such as fieldset or input. If any child form element is invalid, the form will also be considered invalid, and the :invalid conditional styling will be applied.

form:invalid {
  outline: 3px dashed red;
}

Fieldsets

Similar to form, fieldset also enables conditional styling using :invalid based upon the validity of child input elements, like radio or checkbox inputs.

fiedset:invalid {
    outline: 3px dashed red;
}

Inputs

input elements enable conditional styling using :invalid by validating the value of the input.

Validation checks if the input value is required with the required attribute, or if the input must match a pattern described by the pattern attribute.

Adding :invalid to input will apply the same styles to all invalid input types. Pairing the input with the [type] attribute selector enables styling specific input types.

/* All input types */
input:invalid {
    outline: 3px dashed red;
}

/* Specific input types */
input[type="text"]:invalid {
    outline: 3px dashed red;
}

Usage

Accessibility Consideration

Although :invalid enables enhanced styling for form elements, this may not be enough to successfully translate the validity of inputs accessibly.

Along with styling the input, please consider including text describing the invalid validation to assistive devices.

Testing for validity

To enable validation testing on an input, the input must be set as a required field by applying the required attribute to the field.

<input type="text" id="name" name="name" required />

Inputs with the required attribute will match the :invalid pseudo-class selector if the input has not been given a value.

Browsers will provide additional validation testing for some input types. For example, the email type inputs will generally require an @ to be included in the inputs value to be considered valid.

Validity testing may be enhanced by providing the input a pattern that the value should match against to be considered valid. This can be accomplished by including the pattern attribute on an input.

The pattern attribute must be supplied a pattern, typically in a regular expression format, to test the provided value.

<input type="text" id="zipcode" name="zipcode" pattern="[0-9]{5}" inputmode="numeric" required />

Chaining Pseudo-classes

The :invalid pseudo-class may be chained to other pseudo-class selectors, such as :focus or :hover, to adapt styling further.

.input:focus:invalid {
    outline: 3px dashed red;
}

Using with :has()

Since the functional pseudo-class selector :has() is widely available in browsers, it can be used in conjunction with validity pseudo-class selectors to enable other elements to benefit from conditional styling form elements.

To style a parent element that contains an invalid input:

div:has(input:invalid) {
  outline: 3px solid red;
}

Specification

:invalid is defined in the CSS Selectors Level 4 specification as a “validity pseudo-class”, meaning it is used to style interactive elements based on an evaluation of user input.

Browser support

Related articles

Additional resources

• Mozilla Developer Network – :invalid
• W3C – Selectors Level 4
• HTML Specification – :invalid
• W3C Use of Color, Understanding Success Criterion 1.4.1

Related