input:-webkit-autofill 是唯一稳定干预 Chrome/Edge 自动填充背景色的入口，因浏览器用不可覆盖的强制渲染层锁定背景（如淡黄 #FAFFBD），background-color 即使加 !important 也无效；必须用 -webkit-box-shadow: 0 0 0 1000px #fff inset 或 background-image 绕过，并同步设置 -webkit-text-fill-color: #fff !important 控制文字色。
input:-webkit-autofill 是唯一能稳定干预 Chrome/Edge 自动填充背景色的入口，但直接写 background-color 无效——浏览器用一层不可覆盖的背景层锁死了颜色，必须用 -webkit-box-shadow 或 background-image 绕过。
为什么 background-color 加 !important 还是没用？
Chromium 系列浏览器（Chrome 119+、Edge）在 autofill 后会为输入框注入一个「强制渲染层」，它优先级高于所有 CSS 规则，包括带 !important 的 background-color。你看到的淡黄底色（#FAFFBD）就是这层的默认值，不是普通样式可覆盖的 DOM 层级。
真正有效的做法是：用内阴影模拟背景色，或用透明渐变图层压掉原背景。关键点：
-
-webkit-box-shadow: 0 0 0 1000px #ffffff inset中的#ffffff必须替换成你输入框真实的背景色值（比如深色主题下是#2d3748）； - 阴影大小（
1000px）只要大于输入框高度即可，500px～1000px 都行； - 别漏掉
:hover、:focus、:active状态，否则焦点切换时黄色会闪一下。
-webkit-text-fill-color 必须同步设置
autofill 不仅改背景，还会硬设文字颜色为 #222 或 #333，哪怕你写了 color: white 也无效。这是为了保证浅色背景上的可读性，但会破坏深色 UI。
解决办法只有一条：
- 显式加
-webkit-text-fill-color: #fff !important； - 如果文字仍发灰，说明被浏览器内联样式压制，必须加
!important； - 别用
color，它对 autofill 文字完全不起作用。
Firefox 和 Safari 怎么办？
:autofill 在 Firefox 中完全不支持；Safari 从 macOS 14 / iOS 17 才开始支持，但只对 type="password" 偶尔生效，email 或 text 字段基本无响应。
这意味着：纯 CSS 方案在非 Chromium 浏览器里大概率失效。如果你的用户群包含大量 Safari 用户，得准备降级策略：
- 监听
animationstart事件，捕获 autofill 触发的隐式动画，动态加 class； - 对密码字段，用
autocomplete="new-password"主动禁用填充（注意：对已保存的密码字段，这个属性只在首次加载时有效）； - 避免依赖 autofill 样式做关键视觉判断——比如把“已填充”状态当作表单校验依据，容易出错。
transition 延迟方案靠不住
有人用 transition: background-color 5000s 把黄色背景“拖慢”，让它看起来像没变——这方法在 Chrome 旧版本还能凑合，但在 Chrome 119+ 中已被优化掉：浏览器现在直接跳过过渡，瞬间应用 autofill 样式。
更麻烦的是，这个 hack 会让 :focus 动画也延迟，交互感变差。而且 Safari 对超长 transition 有截断（比如 >100000s 就当 0s 处理），实际效果不稳定。
真正值得投入的只有两件事：用 -webkit-box-shadow 覆盖背景 + 用 -webkit-text-fill-color 控制文字色。其他都是临时补丁，上线前务必在 Chrome 119+、Edge 119+、Safari 17+ 真机验证——尤其是圆角输入框和带 border-image 的场景，阴影覆盖稍有偏差就会漏出黄边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
