Автозаполнение Chrome должно установить форму действительной

Question

На первом изображении вы видите ошибку, из-за которой Chrome не устанавливает правильную форму при автозаполнении.

Вот как это должно выглядеть.

Я нашел Github Issue для моей проблемы здесь , но он основан на Angular. Я работаю с Vue.

Метка повышается только тогда, когда поле имеет фокус или является действительным.

input:focus ~ label, input:valid ~ label        {
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

Кроме того, HTML с теневыми узлами выглядит так:

<input type="email" name="email" autocomplete="username" data-vv-delay="500" aria-label="Your email" required="required" class="" aria-required="true" aria-invalid="false">
   <div pseudo="-internal-input-suggested" id="placeholder" style="display: block !important;">avidofood@somemail.com</div>
</input>

Что я мог сделать?

Answer 1

Хорошо, я нашел одно решение по здесь .

В моем случае это (input: -webkit-autofil):

input:focus ~ label, input:valid ~ label, input:-webkit-autofill ~ label{
  top:-20px;
  font-size:14px;
  color:#5264AE;
}