样式自动填充或自动完成默认浏览器下拉列表

Question

是否有某种类型的css前缀，插件，javascript或jquery允许您设置默认浏览器自动填充/自动填充下拉列表的样式。不适用于搜索字段...但适用于<input type="email">

我已使用input:-webkit-autofill，input:-webkit-autofill:hover和input:-webkit-autofill:first-line来更改黄色背景，字体系列，颜色等的外观（在Chrome中）

现在我试图覆盖下拉列表的默认外观 - 这是由您的浏览器生成的。

1. 我正在尝试为所有用户名/电子邮件自动填充下拉菜单自定义外观，文字颜色，：悬停颜色，字体等。

2. 我不想指定数据列表，或者有任何预先定义的变量......

3. 我不想转autocomplete="off"

我使用 dropkick.js 来自定义我的所有<select>下拉菜单 - 并将其更改为<ul>元素。

我想知道是否存在以类似方式自定义所有其他自动填充或自动完成下拉列表的类似内容。

这可能吗？

Answer 1

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

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

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

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

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

Answer 2

我找不到一种使之完全起作用的方法。绝对是Chrome中的错误。

我想出的最佳解决方法是将此CSS添加到您所有可能自动填充的输入中：

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

无论使用什么系统，这都将采用您的系统字体，并将其应用于输入。这也是Chrome的功能，因此，当您将鼠标悬停在自动填充选项上时，字体不会更改。

Answer 3

我有这个相同的问题，不幸的是everything I've seen说这不能在任何类型的本地＆＃34;办法。大多数建议的主要建议是将自动完成设置为关闭然后构建＆amp;样式your own，在大多数情况下可能更多的工作，然后它的价值。