Css 设置自动填充建议的样式

非常简单：我正在处理输入的CSS，但是当MacOS上的Chrome使用建议自动填充功能填充输入时，它会更改字体。有没有一种方法可以覆盖它以保留我的自定义字体和其他CSS属性

最令人不安的是磁场改变了它的高度，这真的很难看

也许我用了错误的关键词搜索，但我什么也没找到

下面是一个快速的示例，可以通过电子邮件字段复制它，我希望您在浏览器中有一些建议：

输入电子邮件{ 字号：2rem； 字体系列：Krub； } 你可以在CSS技巧博客中阅读

基本上，添加以下代码段将允许您更改字体。您还可以在此处添加任何其他样式，如中所示

输入：-webkit自动填充， 输入：-webkit自动填充：悬停， 输入：-webkit自动填充：焦点{ 字体家族：时代； }

---

非标准链式伪类：-webkit autofill:focus可用于在Chrome中自动填充聚焦输入元素

然而，Chrome似乎忽略了一些受影响的属性：-webkit autofill:focus，例如颜色和字体系列。可以通过非标准属性webkit text fill color更改文本的颜色，但没有其他属性可用于更改文本的字体

解决方案可能是使用JavaScript复制悬停的建议，将其附加到新元素，将该元素放在输入的顶部，并根据需要设置样式。但这是不可能的，因为建议不是作为输入值注入的，而且Chrome添加的select输入的内容也不可访问，可能是出于安全原因

但是，您可以通过以下方式缓解此问题：

通过在输入元素上设置autocomplete=off，防止Chrome自动完成； 设置输入的高度和宽度，以防止在用户悬停建议时更改其大小。

---

希望这能有所帮助。

到目前为止，似乎没有办法在Chrome中改变这一点。我肯定会叫它虫子

但是，一个不错的解决方法是为所有可自动填充的输入或具有自动填充功能的表单中的输入设置字体系列：

字体系列：系统用户界面，-apple系统，BlinkMacSystemFont，'Segoe用户界面'，Roboto，'Helvetica Neue'，Ubuntu，Arial，无衬线

这是一个伟大的跨浏览器、跨平台的解决方案，因为它只需要您的系统字体，这正是Chrome为其自动填充字体所做的

---

它还可以确保您的表单在用户使用的任何操作系统上都有可读的字体。

我最好的猜测是Chrome自动填充文本强制为10pt，无衬线。因此，如果您的输入框样式相同，则在单击页面时，它不会明显改变。

对不起，伙计，但这不起作用。在你的代码笔链接上，好的，背景是黑色，文本是绿色，但是字体正在改变。也许这是MacOS上特有的东西，但是当我悬停一个建议时，Chrome会添加它自己的样式，而该字段不保留我的样式：当你悬停autoselect选项时，或者当实际的autoselect选项被选择并输入时，你是否正在修复字体更改？@KarlChelton我的观点是当我悬停autoselect选项时：它填充输入，但字体错误，最糟糕的是字体大小不完全相同，因此它也会改变输入的高度…这很有帮助，谢谢你的回答！我不能关闭自动完成，我很肯定用户不会喜欢的。我可能最终会设置输入的高度，这将是：