Задержка псевдокласса HTML5 :invalid до первого события

Недавно я обнаружил, что :invalid псевдокласс применяется к required элементам формы сразу после загрузки страницы. Например, если у вас такой код:

<style>
input:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
</style>
…
<input name="foo" required />

Тогда ваша страница загрузится с пустым розовым элементом ввода. Встроенная в HTML5 валидация - это здорово, но я не думаю, что большинство пользователей ожидают, что форма будет проверена до того, как они успеют ввести какие-либо значения. Есть ли способ отложить применение псевдокласса до первого события, влияющего на этот элемент (отправка формы, размытие, изменение, что угодно)? Возможно ли это сделать без JavaScript?