Contact Form 7 — как задать стиль заполненному полю прошедшему валидацию?

Question

[Stanislav6]

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

Из коробки, каждое поле имеет только два состояния: "не заполнено/заполнено корректно" и ошибка. Как добавить полю, которое прошло валидацию и заполнено свой стиль?
Задача визуально показать пользователю корректность ввода.

<label class="form-label">
    <span class="input-name">Телефон</span>
    <span class="wpcf7-form-control-wrap" data-name="form-tel">
        <input type="tel" name="form-tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false">
    </span>
</label>

Comments

[Антон Литвиненко]

посмотреть что валидатор накидывает, может какието свои стили

[Stanislav6]

Антон Литвиненко, ничего не накидывает. Только если ошибка.

[Артем Золин]

Почему input:invalid не подходит?

[Stanislav6]

Артем Золин, нет. input:invalid позволяет стилизовать в двух случаях: когда ошибка ввода, либо input:not(:invalid) когда не ошибка. input:not(:invalid) применяет стиль даже когда поле не заполнялось, а мне нужно, чтобы применялся стиль когда поле заполнено и заполнено корректно.
Или я неправильно понял?