如何防止Chrome在自动填写用户名/密码时更改字体？
我有一个用户名和密码输入的登录表单。在Windows上的Chrome中(在其他浏览器或Mac上不会发生)，当鼠标悬停在Chrome密码管理器中保存的用户名上时，字体会发生变化。字体的改变改变了输入的宽度，使我的对齐方式不对准。
显然，我可以设置输入的固定宽度来保存对齐，但这并不能真正解决问题，只是在上面贴了个创可贴。我真正想要的是从一开始就防止字体改变。
我试着用:-webkit-autofill来定位输入，并在输入的css上放满了!important，看看有没有什么东西能坚持下去，但是没有骰子。
Codepen here。你需要在Windows上使用Chrome，并使用谷歌的密码管理器。
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;
}
}
}任何关于防止这种字体改变的线索都将不胜感激！
Stack Overflow用户
发布于 2019-07-12 05:59:57
到目前为止，似乎还没有办法在Chrome中改变这一点。我绝对会称它为bug。
但是，一种不错的解决方法是为所有可自动填充的输入或具有自动填充功能的表单中的输入设置font-family：
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;
这是一个很棒的跨浏览器，跨平台的解决方案，因为它只接受你的系统字体，这正是Chrome似乎正在为它的自动填充字体所做的事情。
它还可以确保您的表单在您的用户使用的任何操作系统上都具有可读字体。
https://stackoverflow.com/questions/56026043
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号