使用 CSS :autofill 突出显示用户未修改的浏览器自动填充字段

Web 功能： :autofill

使用 CSS :autofill 突出显示已（或未）自动填充的字段，帮助引导用户成功填写表单。

如何实现

如需突出显示已由浏览器自动填充（且未由用户修改）的表单字段，请使用 :autofill 类向 CSS 添加选择器。此属性可用于 <input>、<select> 或 <textarea> 元素。

在设置自动填充状态的样式时，您必须遵循无障碍功能最佳实践：

  • 多种状态指示器：不要仅依靠边框颜色来指示自动填充状态。使用多种指示器（例如边框粗细和自定义背景阴影）来确保状态可感知。
  • 保留焦点指示器：切勿在未向键盘用户提供清晰、高对比度的替代方案的情况下移除焦点轮廓 (outline: none)。

以下示例使用 :autofill 设置自定义边框和背景，以及明确的焦点样式：

input:autofill,
input:-webkit-autofill {
  /* Multiple indicators: use both a distinct border and background color via box-shadow to avoid color-only state */
  border: 2px solid #2e7d32;
  box-shadow: 0 0 0 100vmax #e8f5e9 inset;
}

/* MANDATORY: Always provide an explicit focus indicator when styling autofilled states */
input:autofill:focus-visible,
input:-webkit-autofill:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

如本例所示，box-shadow 属性用于自定义背景，因为无法直接在自动填充字段上替换 background-color。

使用正确的 CSS 伪类名称

请勿使用 :auto-fill：这是不正确的。

强制性：请使用 :autofill，因为这是正确的伪类名称。

后备策略

:autofill 伪类是一种渐进增强。在不支持该伪类的浏览器中，表单仍可正常运行，但输入框不会显示自定义自动填充突出显示效果。用户仍能成功填写表单。不应使用任何额外的 JavaScript 后备。