Как переопределить поведение полей?

Question

[Eg0]

input:focus:invalid {
    border: rgba(255, 0, 0, 0.3) 2px solid;
    box-shadow: 0 0 5px rgba(255, 0, 0, 1);
}
input:required:focus:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

Но как только оно становится в фокусе, то даже пустое берет свойство :invalid и игнорирует

input:required:focus:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

Как сделать попроще?

Answer 1

[Anton fon Faust]

Все верно работает.
Дело в том, что поля :requred у вас являются :invalid, если пусты.

Или избавляться от required, или подключаем javascript для определения пусто в поле или нет.