The :invalid selector allows you to select < input > elements that do not contain valid content, as determined by its type attribute. :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.
The :invalid selector selects form elements with a value that does not validate according to the element's settings.
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
The :invalid CSS pseudo-class represents any <input > or other <form > element whose contents fail to validate.