Angular 6：Chrome自动填充标签重叠问题

问题描述

自动填充功能不会在chrome中触发更改事件，并且用户名/密码表单标签正与自动填充值重叠。附上图像样本。

当前行为：您必须在表单/应用程序内部单击以激活自动填充值。

我一直在寻找各种解决方案，并在github / chrome bugs网站上经历了多个线程，但找不到针对此问题的修复程序。由于某些安全问题，这似乎是chrome中的错误，尚未修复。请在Angular中提出解决此问题的方法。

解决方法

在下面的github链接中找到了一些解决重叠问题的方法： https://github.com/Baedda/floating-form-labels/issues/12

我使用纯CSS解决了我的问题：

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,0);
}