Chrome、Edge和Safari对input:-webkit-autofill的黄色背景采用高优先级内阴影（-webkit-box-shadow: inset）实现，绕过background-color渲染层，故直接设background-color无效；需同时覆盖hover/focus/active等伪类状态，并用inset阴影或超长transition对抗。

为什么直接设 background-color 无效

Chrome、Edge（Chromium内核）和 Safari 对 input:-webkit-autofill 的样式控制是“硬编码级”的：它不走常规 background 层，而是用一个高优先级的内阴影（-webkit-box-shadow: inset）模拟黄色背景。所以哪怕你写 background-color: #fff !important，浏览器也直接忽略——这不是 CSS 优先级问题，是渲染层绕过了 background。

input:-webkit-autofill 必须覆盖全状态

只写 input:-webkit-autofill 是不够的，用户聚焦、悬停、激活时，浏览器会重新触发 autofill 样式，导致黄色又弹出来。必须显式声明全部伪类状态：

• input:-webkit-autofill
• input:-webkit-autofill:hover
• input:-webkit-autofill:focus
• input:-webkit-autofill:active

同时别漏掉 textarea:-webkit-autofill 和 select:-webkit-autofill，尤其表单里混用了多类型控件时。

纯色背景用 box-shadow: inset 覆盖

这是目前最稳定、零 JS、无兼容性风险的方案，但关键点很细：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• -webkit-box-shadow: 0 0 0 1000px #f8f9fa inset !important 中的 #f8f9fa 必须是你输入框真实的背景色值（比如深色主题下是 #2d3748，就绝不能写 white）
• 1000px 是安全半径，确保填满所有尺寸；太小（如 50px）在圆角或 padding 大的输入框里会露黄边
• 必须加 -webkit-text-fill-color: #333 !important，否则文字可能变灰或反色
• 这段 CSS 要放在 最顶部或内联，否则 DOM 渲染完成前 autofill 已经生效，样式来不及接管

透明背景或渐变背景只能靠 transition 拖延

如果输入框是 background: transparent 或带背景图/渐变，用纯色内阴影会直接破坏设计。此时唯一可行的是“拖延战术”：

• transition: background-color 5000s ease-in-out 0s —— 让浏览器想把背景变黄也得等 1.4 小时
• 必须配合 -webkit-text-fill-color: #333 !important，否则文字颜色可能异常
• 该方案对密码字段同样有效，但要注意：autocomplete="new-password" 才能真正禁用密码填充，autocomplete="off" 在 Chrome 119+ 已基本失效

真正难的不是写对那几行 CSS，而是意识到：autofill 不是“样式被覆盖”，而是浏览器主动重绘了一层 UI；你得用同等级机制（inset 阴影或 transition）去对冲，而不是在 background 层上徒劳覆盖。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！