Form validity pseudo-classes

The form validity CSS pseudo-classes match <form> elements based on the constraints of a form field, such as validity (:valid, :invalid, :in-range, :out-of-range) and necessity (:optional or :required).

Baseline Status: Achieved Widely Available on Jan 29, 2018 (Cross-browser Newly Available since Jul 29, 2015).

Desktop Browser Engine Support

Google Chrome

10

Supported

Mozilla Firefox

4

Supported

Apple Safari

5

Supported

Microsoft Edge

12

Supported

Mobile Browser Engine Support

Chrome Android

18

Firefox Android

4

Safari iOS

5

Specifications and References

Specification ↗ Can I Use (css-optional-pseudo) ↗ Can I Use (css-in-out-of-range) ↗ Feature XML ↗

MDN Browser Compat Data Keys:

css.selectors.in-range ↗ css.selectors.invalid ↗ css.selectors.invalid.form ↗ css.selectors.optional ↗ css.selectors.out-of-range ↗ css.selectors.required ↗ css.selectors.valid ↗ css.selectors.valid.form ↗