设置自动填充建议的样式

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

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

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>

Answer 2

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

Answer 3

到目前为止，Chrome 似乎无法更改这一点。我肯定会称之为错误。

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

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

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

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

Answer 4

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

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

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

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

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

希望对您有所帮助。

Answer 5

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

本质上，添加以下 sn-p 将允许您更改字体。您还可以在此处添加任何其他样式，如 this CodePen demo 所示。

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