设置自动填充建议的样式

Question

非常简单：我正在处理输入的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>

谢谢！

Answer 1

非标准链式伪类:-webkit-autofill:focus可用于设置在Chrome中自动填充的焦点输入元素的样式。

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

一种解决方案是使用JavaScript复制悬浮的建议，将其添加到新元素，将该元素放置在输入的顶部，然后根据需要设置其样式。不过，这是不可能的，因为建议不会作为输入值注入，并且Chrome添加的选择输入的内容也无法访问（可能出于安全原因，两者均无法访问）。

但是，您可以通过以下两种方法来缓解此问题：

希望能有所帮助。

Answer 2

截至目前，似乎无法在Chrome中更改此设置。我肯定会称它为错误。

但是，一个不错的解决方法是font-family为所有可自动填充的输入或具有自动填充功能的表单内的输入设置：

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;

这是一个很棒的跨浏览器，跨平台解决方案，因为它只需要使用系统字体的任何字体，这正是Chrome似乎对其自动填充字体所做的。

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