Learn Development at Frontend Masters
:invalid selector allows you to select
<input> elements that do not contain valid content, as determined by its
:invalid is defined in the CSS Selectors Level 3 spec as a “validity pseudo-selector”, meaning it is used to style interactive elements based on an evaluation of user input.
This selector has one particular use: providing a user with feedback while they are interacting with a form on the page. The example below uses CSS to turn the “Email” fields red or green, responding to the whether or not the contents match a valid email address pattern:
Note how the first
<input> (“Email”) is green—valid—even when there is no content in the field. This is because the input is optional, so leaving it blank would result in a valid form submission. To fix this behaviour, the second
<input> has a “required” attribute, which means that a blank field would result in an invalid form submission.
Points of Interest
:invalidcan be “chained” with other pseudo-selectors: like
:focusto only validate when the user is typing,
:afterto generate icons or text to provide more user feedback, or attribute selectors like
input[value=""]to only validate input fields containing content.
:invalid was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it. However, modern browser support is getting better. If you require older browser support, either polyfill, or use these selectors in non-critical ways á la progressive enhancement, which is recommended.