我有一个用户名和密码输入的登录表单。在Windows上的Chrome中（其他浏览器或Mac上不会出现这种情况），当鼠标悬停在Chrome密码管理器中保存的用户名上时，字体会发生变化。字体的变化会改变输入的宽度，使我的对齐方式变得不正常。
显然，我可以为输入设置一个固定的宽度来保存对齐方式，但这并不能真正解决问题，只是在上面贴了一个创可贴。我真正想要的是首先防止字体更改。
我试过用:-webkit-autofill定位输入，并把!important放在我输入的css上，只是想看看是否有什么东西会粘上，但没有骰子。
codepen here。你需要在Windows上使用Chrome浏览器，并使用谷歌的密码管理器。
超文本：
<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;
}
}
}任何防止这种字体变化的线索将不胜感激!
7条答案
按热度按时间ulydmbyx1#
试试这个!
你可能只需要这个
其他的只是以防万一
hm2xizp92#
这似乎是Chrome最近的一个变化：Issue 953689: Previously entered form values overrides styling when moused over。据我所知，这种情况在macOS和Windows上都发生过，任何地方都会向最终用户显示自动填充。显然，这是故意为了修复以前的实现Issue 916838: Security: Two autocomplete flaws together allow sites to invisibly read credit card numbers after a single keypress的安全问题
目前似乎还没有办法覆盖这些新样式--如果样式的变化实在太令人讨厌，你可以禁用自动填充（Disabling Chrome Autofill）或设置字段的字体样式（
font-family，font-weight，font-style，font-size），以匹配Chrome的自动填充建议--如下所示：https://stackoverflow.com/a/56997845/1798491）ix0qys7i3#
以下是我在2021年成功阻止Chrome更改密码/用户名输入字段字体的解决方案：
我还注意到由于某种原因
display: flex与该代码冲突，请看一看：一个二个一个一个
ohfgkhjo4#
如何在输入时更改Chrome自动完成样式：
}
g52tjvyc5#
我不运行在windows上，但你有没有尝试过针对标签和形式以及？回复：css特异性。然后在所有
qf9go6mv6#
这是我找到的唯一一个解决使用自动填充时字体大小同步问题的方法。这个方法可以缩放自动填充，然后调整自动填充：：第一行字体大小，看起来可以给予你独立控制两者。行高需要相应地调整。密码输入需要一个不同的行高，在这些设置下大约是1.25（仍然会跳一点）。
ogsagwnx7#
到目前为止，似乎没有办法在Chrome中改变这一点。我肯定会称之为bug。
但是，一个不错的解决方法是将所有可自动填充的输入或具有自动填充功能的表单中的输入的
font-family设置为：font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;这是一个伟大的跨浏览器，跨平台的解决方案，因为它只是采取任何您的系统字体，这正是Chrome似乎正在做的，它的自动填充字体。
它还可以确保表单在用户使用的任何操作系统上都具有可读字体。