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

Question

自动填充不会触发 chrome 中的更改事件，并且 username/password 表单标签与自动填充值重叠。附上图片示例。

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

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

中提出解决此问题的方法

Answer 1

在下面 github link 中找到了一些可能的重叠问题解决方案： 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);
}

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

Angular 6: Chrome Autofill label overlapping issue

html

css

google-chrome

autofill

angular