Здравствуйте.

Снова вопрос по CSS.

Вот есть поле. type=text, то бишь. У него стоит required.

В css правило input[type="text"]:invalid. Мысль была в том, что если поле пустое, то отображается подсказка типа "type your e-mail address".
Если же пользователь печатает (:focus) или поле не пустое, то background: none, чтобы текст на фоне не смешивался с вбитым пользователем.

Пока оно в таком варианте - всё ок и замечательно.
Но захотелось мне поиграться с атрибутом pattern, чтоб проверку формы делал браузер (принцип "всё что можно сделать без js - делаем без js").

И тут получает загвоздка, т.к. :invalid происходит когда неверные данные в поле (пустое поле или допустим e-mail русскими буквами).
И получается, что если вбить неверные данные, они остаются в поле, срабатывает :invalid и на фон поля ставится подсказка (ну, если фокус потеряется, а он потеряется скорее всего, т.к. пользователь тупо ткнёт где-нибудь, чтоб окошко-предупреждалку убрать).
В итоге имеем пересечение вбитого текста и фонового.

Собсно вопрос, это можно как-то обойти?
Чтобы при пустом поле был один стиль, а при заполненном (пусть и неверно) был другой.