:valid

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

form:valid {
  outline: 3px dashed green;
}

Syntax

:valid {
  /* ... */
}

Though syntactically similar for all form elements, the way validation differs between <form>, <fieldset>, and <input> influences how it works. Let’s cover those individually to see how.

Forms

The :valid pseudo-class enables condition styling on <form> elements based on the validity of child form elements, such as <fieldset> or <input>. If all child form elements are valid, then the <form> will also be considered valid, and :valid conditional styling is applied.

form:valid {
  outline: 3px dashed green;
}

Fieldsets

Similar to <form>, :valid applies styling to <fieldset> elements conditionally based on the validity of child <input> elements, but only direct children, like radio buttons or checkboxes.

fiedset:valid {
  outline: 3px dashed green;
}

Inputs

:valid applies conditional styling to <input> elements by validating the value of the <input>.

Specifically, 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 :valid to <input> will apply the same styles to all valid input types. Pairing the input with the [type] attribute selector enables styling specific input types.

/* All input types */
input:valid {
  outline: 3px dashed green;
}

/* Specfic input types */
input[type="text"]:valid {
  outline: 3px dashed green;
}

Accessibility considerations

In case you are considering using :valid to enhance styling for form elements, this may not be enough to successfully translate the validity of inputs in an accessible way. For example, please consider including text describing the successful validation for assistive devices, like screen readers.

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 :valid pseudo-class selector if input has been provided a value. Browsers will provide additional validation testing for some input types. For example, the <input type="email"> input will generally require an @ to be included in the inputs value to be considered valid.

Validity testing may be enhanced by providing an input with a pattern that the input value should match 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 :valid pseudo-class may be chained to other pseudo-class selectors, such as :focus or :hover, to adapt styling further.

.input:focus:valid {
    outline: 3px dashed green;
}

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.

For example, we can style a parent element that contains an :valid input

div:has(input:valid) {
  outline: 3px solid green;
}

We could even scope this to the <form> element itself so that styling is applied to it if it contains a :valid element anywhere:

form:has(:valid) {
  /* If :valid is present anywhere in the form. */
}

Specification

:valid 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 – :valid
• W3C – Selectors Level 4
• HTML Specification – :valid
• W3C Use of Color, Understanding Success Criterion 1.4.1

Related