设置自动填充建议的样式

Posted 2023-03-06

【中文标题】设置自动填充建议的样式

【英文标题】：Styling an autofill suggestion

【发布时间】：2019-10-09 18:58:12

【问题描述】：

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

谢谢！

【问题讨论】：

当您悬停自动选择选项或选择并输入实际的自动选择选项时，您是否正在修复字体更改？

@KarlChelton 我的意思是当我悬停自动选择选项时：它填充了输入但字体错误，最糟糕的是字体的大小不完全相同，所以它也会改变输入的高度...

【参考方案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>

【参考方案2】：

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

【参考方案3】：

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

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

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

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

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

【参考方案4】：

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

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

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

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

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

希望对您有所帮助。

【讨论】：

这有帮助，谢谢您的回答！我无法关闭自动完成功能，我很确定用户不会喜欢这样。我可能最终会设置输入的高度，这就是全部:)

【参考方案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;

【讨论】：

对不起，伙计，但这不起作用。在您的 codepen 链接上，好的，背景为黑色，文本为绿色，但字体正在更改。也许这在 MacOS 上是特定的，但是当我悬停一个建议并且该字段不保持我的风格时，Chrome 会添加自己的风格:(