Javascript Chrome autofill应将表单设置为有效

在第一张图片上，您看到一个bug，Chrome在自动填充时没有将表单设置为有效

应该是这样的

我在我的问题中发现了一个Github问题，但它是基于角度的。我和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>

avidofood@somemail.com

---

我能做什么？

好的，我找到了一个解决方案

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

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