【发布时间】：2019-09-25 07:40:27
【问题描述】：
我有一个包含用户名和密码输入的登录表单。在 Windows 上的 Chrome 中（在其他浏览器或 Mac 上不会发生），将鼠标悬停在 Chrome 密码管理器中保存的用户名上时，字体会发生变化。然后字体更改会更改输入的宽度，从而使我的对齐方式不正常。
显然我可以为我的输入设置一个固定宽度以保存我的对齐方式，但这并不能真正解决问题，只是在上面贴上创可贴。我真正想要的是首先防止字体更改。
我尝试使用:-webkit-autofill 定位输入并将!important 放在我输入的css 中，只是为了看看是否有任何东西会粘住但没有骰子。
代码笔here。您需要在 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;
}
}
}
任何关于防止这种字体更改的线索将不胜感激！
【问题讨论】：
-
我也有同样的问题。在我看来，这是 Chrome 中的一个错误。我决定将所有不断改变宽度的输入字段放在 flexbox 容器中，以保持宽度稳定作为临时解决方法。
-
与您在这里所说的相反，这不是特定于 Windows 的。所有桌面版本的 Chrome 都将存在相同的错误。如果您没有在 Mac 上观察到它，我怀疑这是因为您在该 Mac 上安装的 Chrome 在您测试时不是最新的。 （请注意，在您提出此问题前不到一个月，该错误就被引入 Chrome 的发布版本。）