chrome等浏览器仍不支持标准:autofill伪类，必须用:-webkit-autofill配合inset阴影遮罩、text-fill-color及长时transition来覆盖自动填充黄色背景。
:autofill 伪类目前不能直接用于覆盖 Chrome 的自动填充黄色背景，必须继续用 :-webkit-autofill。 标准化虽已推进多年，但截至 2026 年 9 月，Chrome、Edge、Safari 等主流 WebKit/Blink 内核浏览器仍不支持 :autofill 的样式控制能力——你写 input:autofill { background-color: white; } 完全无效。真正起作用的，还是那个带前缀的老方案。
为什么 background-color 直接设置总失败？
Chrome 对自动填充状态应用了极高优先级的内部样式规则，部分甚至带隐式 !important。它不是“没生效”，而是渲染层逻辑绕过了常规 background 层：浏览器在内容层下方单独画了一块填充底色，background-color 只能影响上层容器，盖不住它。
常见错误包括：
- 只写
input:-webkit-autofill，漏掉:hover/:focus/:active，导致用户点击后黄色突然闪回 - 用
background-color: white !important，在 Chrome 119+ 中依然透出淡黄（#FAFFBD）边角 - 阴影 spread 值太小（比如
10px），缩放或高 DPI 下露出原色
:-webkit-autofill 必须配 -webkit-box-shadow inset
这是当前唯一稳定、零 JS、全 CSS 的解法。原理不是改背景，而是在输入框内画一个纯色“遮罩层”：
-
-webkit-box-shadow: 0 0 0 1000px #f8f9fa inset：其中1000px是关键，必须远大于输入框最大可能宽高（含 padding、border、缩放），否则边缘露色 -
#f8f9fa必须是你输入框真实的背景色值（深色主题就填#2d3748，不是随便写white） - 必须同时加
-webkit-text-fill-color: #333，否则文字常被强制为深灰或黑色，对比度崩坏 - 推荐完整选择器链：
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active
要不要加 transition 延迟 hack？
要，尤其在表单快速聚焦/失焦时。Chrome 会先短暂显示原生黄色，再应用你的 shadow，肉眼可见闪烁。加这个能“骗过”视觉：
-
transition: background-color 5000s ease-in-out 0s—— 把 background-color 过渡拉长到 5000 秒，实际就是冻结它 - 注意：这个 transition 是给
input元素本身写的，不是写在:-webkit-autofill里 - 如果项目已用 CSS-in-JS 或动态主题切换，该 transition 可能干扰主题色过渡，需条件性注入
真正容易被忽略的是：这个伪类只对 autocomplete 值合法且内容非空的字段生效；密码字段若设 autocomplete="new-password"，:-webkit-autofill 根本不会触发——此时你连覆盖机会都没有，得换思路处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
