Input valid\invalid type=password?

Question

[EpicUsaMan]

Автозаполнение хрома заполняет поле email и password сохраненными данными, но поле с type="password" не принимает значение color: green или color: red до того как на него кликнуть, при этом даже, если отвести фокус на любой другой input password останется с color: green, у email же поведение нормальное.

<form>
<input required type="email" name="email">
<input required type="password" name="password">
</form>

input:valid, input:focus {
color: green;
}

input:invalid {
color: red;
}

Comments

[EpicUsaMan]

PS. Чтобы заработал type=password достаточно нажать любую кнопку в любом месте на сайте.
Какой-то дикий бред

[EpicUsaMan]

Слева до любого действия на сайте, справа после.
На более рабочем примере, используются те же input:valid и input:focus

[Алексей Струков]

С инпутами все очень плохо. Это лишь верхушка айсберга)
Попробуй убрать псевдокласс focus

[EpicUsaMan]

Алексей Струков: мне он необходим, проблема только в левой части картинки. Заполненные формы не должны выглядеть как не заполненные, так же как и активные формы. (читать формы как инпуты)

[Алексей Струков]

EpicUsaMan: я понял. Мне кажется что на фокусе стиль должен отличаться от валидных стилей. Ну и еще я ща посмотрел, у тебя там color меняется на focus и invalid, а на картинке текст пассворда синий - как это получается не знаю. Попробуй загрузить код на codepen или аналогичные сервисы и дай ссылку и тогда можно будет смотреть и искать причины. По идее все должно быть нормально в хроме.

[EpicUsaMan]

Алексей Струков: синий == валидный или фокус (просто в первом примере сделал green)
красный == не валидный