input:-webkit-autofill 是唯一稳定覆盖 Chrome、Edge、Safari 自动填充黄色背景的 CSS 入口；其生效需同时匹配 hover/focus/active 四态，用 inset box-shadow 覆盖内阴影层，并强制设置 -webkit-text-fill-color 控制文字色。
直接说结论：input:-webkit-autofill 是目前唯一能稳定覆盖 Chrome、Edge、Safari 自动填充黄色背景的 CSS 入口；input:autofill 在 Firefox 中不生效，在 Chrome 120+ 和 Safari 17.4+ 中虽已支持但行为不稳定，不能替代前者。
为什么 background-color 加 !important 还是无效
浏览器对自动填充状态的背景不是用 background-color 实现的，而是通过一个高优先级内阴影层（inset shadow）绘制在内容下方。这个层甚至绕过常规 CSS 级联逻辑，background-color: #fff !important 会被直接跳过——不是写错了，是渲染路径根本没走这里。
- 真正起作用的是
-webkit-box-shadow: 0 0 0 1000px #f8f9fa inset：其中1000px是 spread radius，必须远大于输入框最大可能尺寸（含 padding、缩放、高 DPI），否则边缘会漏出原生淡黄（#FAFFBD） - 颜色值必须和你实际背景一致，比如深色主题就得填
#2d3748，不能硬写#fff - 如果输入框是
background: transparent或linear-gradient，box-shadow 会破坏设计；此时只能靠transition: background-color 5000s延迟变色来“骗过”视觉
input:-webkit-autofill 必须连写 hover/focus/active 四个状态
只写 input:-webkit-autofill 是不够的。用户鼠标移入、点击、聚焦时，浏览器会临时退出 autofill 状态，导致样式闪回原色——这不是 bug，是 WebKit 的状态切换机制。
- 必须显式覆盖全部交互态：
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active - 漏掉任一状态，都可能在表单快速操作中看到黄色“抽搐”
- 这些选择器要写在同一个 CSS 规则块里，避免被其他样式覆盖或解析顺序错乱
-webkit-text-fill-color 不是可选项，是必填项
自动填充后，color 属性经常失效，文字可能变成灰黑、反色或模糊难读。这不是字体继承问题，而是浏览器强制应用了自己的文字渲染策略。
- 必须用
-webkit-text-fill-color: #333 !important显式控制文字色 - 即使你写了
color: #333，也得加!important，但依然不如-webkit-text-fill-color可靠 - 如果页面有深色模式切换，这个值也要同步更新，否则暗色主题下文字可能消失（比如填了
#333却配#2d3748背景）
真正容易被忽略的是：这个伪类只对 autocomplete 值合法且内容非空的字段生效——autocomplete="off" 在 Chrome 120+ 已基本失效，但若用户没点“保存密码”，或用了 Bitwarden 等插件填值，:-webkit-autofill 根本不会匹配，你写的样式也就压根不会运行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
