Chrome autofill should set the form to valid

Question

On the first image, you see a bug, where Chrome does not set the form to valid when autofilling.

This is how it should look like.

I found a Github Issue to my issue here, but it is based on Angular. I'm working with Vue.

The label goes only up when the field is focues or valid.

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

Besides that, the html with shadow nodes looks like this:

<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;">[email protected]</div>
</input>

What could I do?

Answer 1

Ok I found one solution over here.

In my case it's (input:-webkit-autofil):

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