非常简单：我正在研究输入的 CSS，但是当 Chrome（在 MacOS 上）使用建议（自动填充功能）填充输入时，它会更改字体。有没有办法覆盖它以保留我的自定义字体和其余 CSS 属性？
最令人不安的是，场地的高度发生了变化，这真的很难看……
也许我搜索了错误的关键词，但我没有找到任何东西......
这是一个使用电子邮件字段重现它的快速示例，希望您能在浏览器中提出建议：
input#email {
font-size: 2rem;
font-family: "Krub";
}
<link href="https://fonts.googleapis.com/css?family=Krub&display=swap" rel="stylesheet">
<input id="email"></input>
Thanks!
非标准链式伪类:-webkit-autofill:focus可用于设置 Chrome 中自动填充的焦点输入元素的样式。
然而 Chrome 似乎忽略了一些受影响的属性:-webkit-autofill:focus， 例如color and font-family。文本的颜色可以通过（非标准）属性更改-webkit-text-fill-color，但没有其他属性可用于更改文本的字体。
解决方案可能是使用 JavaScript 复制悬停的建议，将其附加到新元素，将该元素放置在输入顶部并根据需要设置其样式。但这是不可能的，因为建议不会作为输入值注入，并且 Chrome 添加的选择输入的内容也无法访问（可能都是出于安全原因）。
不过，您可以通过以下任一方式缓解该问题：
- 通过设置阻止 Chrome 自动完成
autocomplete="off"在输入元素上；
- 设置输入的高度和宽度，以防止其在用户悬停建议时更改大小。
希望有帮助。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
