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

Question

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

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

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

标签： htmlcssangulargoogle-chromeautofill

Answer 1

在以下 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,-52%,0);
}