直接结论：Chrome中无法用background-color去除autofill黄色背景，唯一稳定解法是input:-webkit-autofill配合-webkit-box-shadow内阴影遮罩，并需覆盖hover/focus/active全状态且设置-webkit-text-fill-color；Safari不支持该伪类，必须单独处理。
直接结论：你不能靠 :autofill 去掉 Chrome 的黄色背景，必须用 input:-webkit-autofill 配合 -webkit-box-shadow 遮罩——这是 2026 年仍有效的唯一稳定解法。
为什么 :autofill 在 Chrome 里基本无效
Chrome（含 Edge、新版 Safari）至今未将 :autofill 视为样式控制入口。你写 input:autofill { background-color: white; }，浏览器压根不执行渲染层替换。它只在部分场景下触发匹配（比如开发者工具里能看到伪类被标记），但样式规则被内核级 shadow layer 绕过。真正起效的仍是带前缀的老方案：input:-webkit-autofill。
input:-webkit-autofill 必须配 -webkit-box-shadow: inset
Chrome 把自动填充背景实现为一个高优先级内阴影层，不是普通 background。所以：
-
background-color即使加!important也常透出淡黄边角（如#FAFFBD） - 正确做法是用
-webkit-box-shadow: 0 0 0 1000px #f8f9fa inset—— 其中1000px是 spread 值，必须远大于输入框最大可能尺寸（含 padding、缩放） -
#f8f9fa必须是你输入框真实的背景色（深色主题就填#2d3748，不是随便写white） - 漏掉
-webkit-text-fill-color: #333会导致文字变灰黑、对比度崩坏
必须覆盖 :hover / :focus / :active 全状态
只写 input:-webkit-autofill 是不够的。用户鼠标移入、点击、聚焦时，浏览器会临时退出 autofill 状态，导致黄色闪回。要这样写：
立即学习“前端免费学习笔记（深入）”；
input:-webkit-autofill,<br>input:-webkit-autofill:hover,<br>input:-webkit-autofill:focus,<br>input:-webkit-autofill:active {<br> -webkit-box-shadow: 0 0 0 1000px #f8f9fa inset;<br> -webkit-text-fill-color: #333 !important;<br> transition: background-color 5000s ease-in-out 0s;<br>}
这个 transition 不是做动画，而是把颜色切换“冻结”到人类无法感知的程度（5000 秒 ≈ 1.4 小时），防止状态切换时背景抽搐。
容易被忽略的生效前提
很多同学写了样式却没效果，问题往往卡在这几处：
- CSS 必须在
<head>内联或顶部加载，异步注入的 CSS 很可能错过 autofill 触发时机 -
autocomplete="off"在 Chrome 120+ 已基本失效，尤其对密码字段；要用autocomplete="new-password"或语义化分组（如autocomplete="section-login email"） - 该伪类只对真正被浏览器自动填充的字段生效——如果用户没点“保存密码”，或用了 Bitwarden 等插件填值，
:-webkit-autofill根本不会匹配 - Safari 不认
:-webkit-autofill，也不上黄色背景，所以你的这套规则在 Safari 里完全不执行；别指望一套 CSS 通吃
真正难的不是写出规则，而是确认它到底有没有进入匹配状态——打开 DevTools，在 Elements 面板里手动选中 input，看右上角的伪类列表是否勾上了 :webkit-autofill。没勾，说明填充逻辑没走浏览器原生路径，再调样式也没用。
