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

These answers are out of date. Now you can do this by checking for a placeholder pseudo-class with CSS.

input:not(:placeholder-shown):invalid {
    background-color: salmon;
}
form:invalid button {
    background-color: salmon;
    pointer-events: none;
}

    
    Submit

It starts with a normal background and turns pink as you enter you incomplete email address into it.