В CSS нет никакого свойства с именем "valid", поэтому вы не можете использовать его вместе с "focus". Если вы хотите применить стили к элементу при его корректном заполнении, вам следует использовать псевдокласс ":valid".
Псевдокласс ":valid" применяется к элементу формы, когда текущее значение ввода соответствует типу или шаблону поля ввода. Таким образом, если пользователь вводит корректные данные в поле ввода (например, правильный адрес электронной почты в поле для электронной почты), псевдокласс ":valid" будет активирован.
Пример использования псевдокласса ":valid" вместе с псевдоклассом ":focus":
input:focus:valid {
outline-color: green;
}
В этом примере, когда поле ввода получает фокус, и его содержимое является допустимым, цвет обводки поля будет зеленым.
Однако стоит отметить, что стилизация элементов формы (в том числе псевдоклассов) может быть немного ограничена в зависимости от браузера и его версии. Некоторые старые браузеры или устаревшие версии могут не поддерживать полностью или вообще игнорировать некоторые возможности CSS. Поэтому перед использованием такой функциональности следует тестировать на разных браузерах и убедиться, что она работает как ожидается.