Angular 6: Chrome Autofill label overlapping issue

Question

Autofill doesn't trigger change event in chrome and the username/password form label is getting overlapped with the autofilled value. Attached image sample.

Current behaviour : You have to click inside the form / app to activate the autofill value.

I have looked for various solutions and went through multiple threads on github / chromium bugs site but could not find a fix for this issue. This seems to be a bug in chrome which has not been fixed due to some security concerns. Please suggest a way to overcome this issue in Angular.

Answer 1

Found some possible solutions for the overlapping issue in the below github link : https://github.com/Baedda/floating-form-labels/issues/12

I fixed my issue using pure css solution :

Html :-

<div>
    <input type="text" id="name" name="name">
    <label for="name" class="placeholder-label">Name</label>
  </div>

CSS :-

input:-webkit-autofill +  .placeholder-label {
    // your styles for floating label
    -webkit-transform: translate3d(5px,-52%,0);
    transform: translate3d(5px,-52%,0);
}