Блог

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

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

Здесь я обнаружил проблему Github с моей проблемой, но она основана на 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>
  

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

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

В моем случае это (ввод:-webkit-автозаполнение):

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