CSS :invalid Selector
Select and style only if the value of the <input> element is invalid:
border: 2px solid red;
Definition and Usage
The :invalid selector selects form elements with a value that does not validate according to the element's settings.
Note: The :invalid selector only works for form elements with limitations, such as input elements with min and max attributes, email fields without a legal email, or number fields without a numeric value, etc.
Tip: Use the :valid selector to select form elements with a value that validates according to the element's settings.
The numbers in the table specifies the first browser version that fully supports the selector.
CSS Selector :valid