:invalid: a control that fails browser validation

Useful to know

:invalid selects a control or form that does not meet the validity limits of HTML. For example, a required email field may match if it is empty or has an inappropriate value. [1]

Example: input:invalid { border-color: firebrick; }. This is a visual signal, not an application protection. The server must verify the submitted data itself. Think and when you show the error: a red form even before the first introduction can confuse the reader. Add an understandable textual explanation and don't just rely on the red frame.