:autofill | CSS-Tricks

CSS 中的 :auto-fill 伪类允许我们为包含浏览器自动填充内容的 <input> 元素设置样式。

以新的用户注册表单为例。您是否曾经点击或轻触某个字段并看到一个包含输入建议的下拉列表？

Animated GIF showing autocompleted content filling the text fields of a form.

请注意，自动完成的字段具有黄色背景？这就是浏览器在字段包含自动填充内容时对其进行设置样式的方式。 :auto-fill 允许我们使用自己的样式覆盖或扩展该样式。

input:auto-fill { 
  outline: 5px solid rgb(0 0 0 / .5);
}

自动完成何时发生？

这是一个有点棘手的问题，因为每个浏览器都有自己的设置，允许用户启用或禁用自动完成。

Safari autofill settings panel. — Safari

Auto-fill settings in Chrome's user preferences panel. — Chrome

Auto-fill settings in Firefox's user preferences panel. — Firefox

因此，即使您使用 :auto-fill 在输入框上设置自动完成样式，也不一定意味着它会实际发生。用户必须在浏览器设置中启用自动完成才能使该功能正常工作并应用样式。

自动完成发生的另一种情况是在将 autocomplete 属性应用于表单输入时

<input id="name" autocomplete="name">

但是该属性更多的是指导而非硬性规则，因为如果禁用自动填充浏览器设置，则无法直接在 CSS 中覆盖它。 HTML Living Standard 似乎支持该说明

这种自动填充发生的一种方式可能是通过 autocomplete 属性，但用户代理即使在没有该属性的情况下也可能自动填充。

而且，在大多数情况下，情况似乎确实如此——至少在我们的测试中是这样。

HTML autocomplete 属性可用于使用映射到某些字段的令牌匹配某些字段。有关可用令牌的完整列表，请参阅规范这里.

覆盖用户代理 `:auto-fill` 样式

浏览器通常会提供自己的样式。我们称这些为用户代理 (UA) 样式，它们是导致我们拥有诸如 CSS 重置之类内容的原因，以覆盖它们以获得一致的跨浏览器初始样式。

我们之前看到 Chrome 将浅黄色 background-color 应用于自动填充内容。 Chrome 的 UA 样式包括

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
    color: fieldtext !important;
}

根据 MDN，我们无法在 CSS 中覆盖这些样式，但是 Geoff 的这段代码似乎可以使用内嵌 box-shadow 更改 background-color，同时使用 -webkit-text-fill-color 更改文本的颜色

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #31b0dd;
  -webkit-box-shadow: 0 0 0px 40rem #ffff inset;
}