自动填充用户名/密码时，如何防止Chrome更改字体？

Question

我有一个使用用户名和密码输入的登录表单。在Windows上的Chrome（在其他浏览器或Mac上不会发生）中，将鼠标悬停在Chrome密码管理器中保存的用户名上时，字体会更改。然后，更改字体会更改输入的宽度，从而使我的对齐方式毫无用处。

显然，我可以为输入设置固定宽度以保存对齐方式，但这并不能真正解决问题，只需在其上放置一个创可贴即可。我真正想要的是首先防止字体更改。

我尝试将输入作为目标输入，:-webkit-autofill然后将!important输入的所有CSS都放到上面，以查看是否有东西粘住但没有骰子。

Codepen在这里。您需要使用Windows上的Chrome浏览器，并使用Google的密码管理器。

HTML：

<form>
    <label>
        <input type="text" name="username" placeholder="Username" required />
    </label>
    <label>
        <input type="password" name="password" placeholder="Password" required />
    </label>
  <button type="submit">Login</button>
</form>

SCSS：

// setting font for more exaggerated difference
* {
  font-family: Times, "Times New Roman", serif;
}

// why doesn't this or anything else work?
input {
  &:-webkit-auto-fill {
    &,
    &:hover,
    &:focus {
    font-family: Times, "Times New Roman", serif !important;
    }
  }
}

关于防止这种字体更改的任何线索将不胜感激！

Answer 1

尝试这个！

      &:-webkit-autofill::first-line,
      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        font-family: Times, "Times New Roman", serif !important;
      }

你可能只需要这个

     &:-webkit-autofill::first-line

其他只是以防万一