应优先使用 input:-webkit-autofill，因其在各浏览器中稳定生效；input:autofill 仅作渐进增强。需用 -webkit-box-shadow 遮罩替代 background-color，并覆盖 hover/focus/active 状态，配合 -webkit-text-fill-color 和超长 transition 防止闪烁。
input:autofill 和 input:-webkit-autofill 到底该用哪个
标准 :autofill 在 Chrome 120+、Edge 120+、Safari 17.4+ 中已支持，但 Firefox 仍不支持，且部分旧版 Chrome（如 119 及之前）完全忽略它。实际项目里，input:-webkit-autofill 是唯一能稳定生效的入口——不是“应该用”，而是“不用它就根本盖不掉黄色背景”。input:autofill 可以作为渐进增强加在后面，但不能替代前者。
background-color 为什么总被忽略
浏览器对自动填充状态应用的是内联级优先级样式，甚至带隐式 !important。直接写 background-color: #fff 大概率无效，哪怕加了 !important 也常被绕过。真正可靠的方式是用 -webkit-box-shadow: 0 0 0 1000px #fff inset —— 它不改 background，而是在内容层下方画一个纯色遮罩，视觉上等效于换底色，且优先级碾压所有常规 background 规则。
必须同时覆盖 hover/focus/active 状态
只写 input:-webkit-autofill 是不够的。用户鼠标移入、点击、聚焦时，浏览器会临时退出 autofill 状态，导致样式闪回原色。必须一并声明：
input:-webkit-autofillinput:-webkit-autofill:hoverinput:-webkit-autofill:focusinput:-webkit-autofill:active
否则交互过程中会出现明显闪烁。另外，-webkit-text-fill-color: #333 必须配 !important，否则文字可能变成灰黑难读。
transition 延迟不是为了动画，是为了“看不见变化”
写 transition: background-color 5000s ease-out !important 不是想做慢动画，而是让浏览器把颜色切换过程拉长到人类无法感知的程度。部分 iOS Safari 对 transition-delay 支持不稳定，所以别写 delay，直接拉长 duration 才跨设备可靠。这个 trick 看似取巧，但它是目前唯一能防止状态切换时背景“抽搐”的通用解法。
真正容易被忽略的是：这个伪类只对 autocomplete 值有效的字段起作用；如果字段被设为 autocomplete="off" 或值为空，:-webkit-autofill 根本不会触发——不是样式没生效，是状态压根没进入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
