Delay HTML5 :invalid pseudo-class until the first event

Question

I recently discovered that the :invalid pseudo-class applies to required form elements as soon as the page loads. For example, if you have this cod

Answer 1

I can't comment, but to go with @Carl's very useful answer regarding using :not(:placeholder-shown). As another comment mentioned, this will still show the invalid state if you have NO placeholder (as some form designs call for).

To solve this, simply add an empty placeholder like so

Then your CSS, something like

:not(:placeholder-shown):invalid{ background-color: #ff000038; }

Worked for me!