Chrome自动填充功能应将表单设置为有效

Question

在第一张图片上，您看到一个错误，其中Chrome在自动填充时未将表单设置为有效。

这是它的外观。

我在我的问题here中发现了一个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>

我该怎么办？

Answer 1

好吧，我在here上找到了一种解决方案。

在我的情况下是（输入：-webkit-autofil）：

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