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添加的选择输入的内容也无法访问（可能出于安全原因，两者均可）。

不过，您可以通过以下任一方法来缓解该问题：

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

希望有帮助。

Answer 2

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

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

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

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

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

Answer 3

您可以在CSS Tricks博客中了解changing the autofill styling。

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

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    font-family: Times;
}

Answer 4

我最好的猜测是Chrome自动填充文本被强制为10pt, sans-serif。因此，如果您为输入框设置相同的样式，则在单击页面时不会明显更改该输入框。

Answer 5

这是对我有用的解决方案：

input#email {
  font-size: 2rem;
  font-family: "Krub";
  color: blue;
}

input:-webkit-autofill::first-line {
      color: red;
      font-size: 2rem;
      font-family: "Krub"; 
}

<link href="https://fonts.googleapis.com/css?family=Krub&display=swap" rel="stylesheet">
<input id="email"></input>

我还注意到由于某种原因 display: flex 与该代码冲突，请看：

input#email {
  font-size: 2rem;
  font-family: "Krub";
  color: blue;
  display: flex;
}

input:-webkit-autofill::first-line {
      color: red;
      font-size: 2rem;
      font-family: "Krub"; 
}

<link href="https://fonts.googleapis.com/css?family=Krub&display=swap" rel="stylesheet">
<input id="email"></input>

设置自动填充建议的样式

5 个答案: