结论是：用 input:-webkit-autofill 配合 box-shadow: 0 0 0 1000px #fff inset 覆盖背景色，并设 -webkit-text-fill-color 控制文字颜色，是目前唯一稳定、跨 chrome/safari/edge 有效的方案；因浏览器将自动填充背景实现为高优先级内阴影层，background-color 即使加 !important 也属错位竞争，无法生效。
直接说结论：用 input:-webkit-autofill 配合 box-shadow: 0 0 0 1000px #fff inset 覆盖背景色，再加 -webkit-text-fill-color 控制文字颜色——这是目前唯一稳定、跨 Chrome/Safari/Edge 有效的方案。
为什么 background-color 加 !important 也无效
Chrome 和新版 Edge/Safari 把自动填充背景实现为一个高优先级的内阴影层（inset box-shadow），而不是普通 background 层。你写的 background-color: white !important 本质上在和浏览器的底层渲染层“错位竞争”，根本没打到同一个地方。
常见错误现象包括：
- 样式在 DevTools 里显示已命中，但页面上仍是黄色/灰白底
- 聚焦后黄色又冒出来（只写了
input:-webkit-autofill，没覆盖:focus等状态） - 用的是
textarea或select，但 CSS 只写了input选择器
box-shadow: inset 覆盖法怎么写才真正生效
核心不是“改背景”，而是“画一层纯色遮罩”盖住浏览器默认的内阴影。关键参数不能随便缩：
-
box-shadow: 0 0 0 1000px #f8f9fa inset——1000px是 spread radius，必须够大，否则缩放或宽输入框下会露边 - 必须加
!important，否则浏览器 UA 样式仍可能赢过你的规则 - 要同时写全交互态：
input:-webkit-autofill、input:-webkit-autofill:hover、input:-webkit-autofill:focus、input:-webkit-autofill:active - 别漏掉
textarea:-webkit-autofill和select:-webkit-autofill，尤其表单里混用了这些元素时
透明背景输入框怎么办
如果你的 input 原本是 background: transparent，用纯色 box-shadow 会直接破坏设计。这时不能“覆盖”，只能“拖延”：
- 给
background-color加超长过渡延迟：transition: background-color 5000s ease-in-out 0s - 必须同步设置
-webkit-text-fill-color，否则文字可能变暗或反色；color属性在这里基本无效 - 这个 trick 的本质是让浏览器想把背景变黄，也得等 1.4 小时——用户刷新页面都比它快
容易被忽略的兼容性细节
很多项目卡在“写了但不生效”，问题往往不在伪类本身，而在加载时机和浏览器行为差异：
- CSS 必须放在
最顶部，或内联写入；异步加载的 CSS 很可能赶不上 autofill 的初始渲染时机 -
autocomplete="off"对现代 Chrome（2023 年起）基本无效，尤其密码字段；它只影响下拉提示，不影响填充动作 - Chrome 120+ 开始支持
input:-internal-autofill-selected，但它和:-webkit-autofill触发时机不同（后者更早），建议两个都写，但以:-webkit-autofill为主力 - Firefox 不支持
:-webkit-autofill，也不支持标准化:autofill，实际中它通常不加背景色，不必强求统一
真正难的不是写出那几行 CSS，而是意识到：浏览器对 autofill 的干预是主动渲染 + 强优先级组合拳，你得用同样底层的机制（box-shadow: inset 或超长 transition）去对冲，而不是试图覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
