自动填充用户名/密码时，如何防止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

其他的只是装箱

Answer 2

这似乎是Chrome的最新更改：问题953689：将鼠标悬停在时，先前输入的表单值会覆盖样式。据我所知，这种情况在macOS和Windows上均会发生，向最终用户呈现自动填充的任何地方。显然，这是为解决以前的实施中的安全性问题而故意完成的– 问题916838：安全性：两个自动完成漏洞一起使站点在一次按键后就可以无形地读取信用卡号

似乎没有成为此刻覆盖这些新样式的方式-如果风格的变化实在是太讨厌，您可以禁用自动填写（停用Chrome自动填充），或者设置字段的字体样式（font-family，font-weight，font-style，font-size对比赛Chrome的自动填充建议的建议-如此处建议：https : //stackoverflow.com/a/56997845/1798491）

Answer 3

这是 2021 年对我有用的解决方案，可防止 Chrome 更改密码/用户名输入字段的字体：

input#username {
  font-family: "Rubik";
  font-weight: bold;
  color: blue;
}

input:-webkit-autofill::first-line {
      color: red;
      font-family: "Rubik"; 
      font-weight: bold;
}

<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<input id="username" name="username"></input>

我还注意到由于某种原因display: flex与该代码冲突，请看一下：

input#username {
  font-family: "Rubik";
  color: blue;
  font-weight: bold;
  display: flex;
}

input:-webkit-autofill::first-line {
      color: red;
      font-family: "Rubik";
      font-weight: bold;
}

<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<input id="username"></input>