css - 设置自动填充建议的样式

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 复制悬停的建议，将其附加到新元素，将该元素放在输入的顶部并根据需要设置样式。不过这是不可能的，因为建议不会作为输入值注入(inject)，并且 Chrome 添加的选择输入的内容也不可访问(可能都是出于安全原因)。

不过，您可以通过以下任一方式缓解此问题:

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

希望对您有所帮助。