chrome 的 input:-webkit-autofill 样式渲染层级最高，普通 css 无法覆盖；推荐用 -webkit-box-shadow: 0 0 0 1000px white inset 遮盖背景，需适配主题色且不兼容 background-image；transition 延迟法已不可靠，autocomplete="off" 亦非万能，跨浏览器需组合方案。
Chrome 的 input:-webkit-autofill 样式优先级高到离谱
这不是你 CSS 写得不够狠，而是 Chrome 把自动填充样式画在了渲染层最上层。它不走常规层叠规则，!important 也拦不住它的 background 绘制。你在 DevTools 里看到的 background-color: #FAFFBD 或新版的 #E8F0FE，只是浏览器“告诉你它打算这么画”，不是真能被普通样式覆盖的属性值。
验证方式很简单：打开页面 → 点击 input 触发下拉选填 → 看背景变色 → 在 Elements 面板底部找 User Agent Stylesheet 下带 autofill 字样的条目。只要看到它，就说明问题出在这儿。
用 -webkit-box-shadow: 0 0 0 1000px white inset 覆盖最稳
这是目前兼容性最好、副作用最小的实操方案。原理是用一个超大内阴影把黄色背景完全遮住，相当于在它上面盖了一层白纸。
- 必须加
-webkit-前缀，且只对 WebKit 内核生效（Chrome、Edge、Safari） -
1000px是保险值，太小可能漏边；white换成你实际背景色（比如#f8f9fa），否则在深色主题下会穿帮 - 如果 input 本身有
border-radius，这个阴影会跟着圆角，没问题；但若用了background-image，内阴影会挡住图片，此时该方案失效 - 要同时覆盖
textarea和select，得写全：input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill
transition: background-color 5000s 是障眼法，慎用
这个技巧本质是让黄色背景延迟 5000 秒才出现——人眼根本等不到，看起来就像没了。但它没真正清除样式，只是拖时间。
- 只对
background-color生效，如果 autofill 还改了color或border，这些照样冒出来 - 某些新版 Chrome（v120+）已开始忽略这种 hack，表现为延迟失效或直接无视
- 如果你的表单要做自动化测试（比如 Puppeteer 检查背景色），这个方案会让断言失败，因为 DOM 层面它还是黄的
- 别跟
-webkit-text-fill-color混着用，字体颜色强行设成白色在暗色模式下会不可读
禁用 autocomplete="off" 不等于彻底解决
加 autocomplete="off" 确实能阻止自动填充触发，但现代浏览器（尤其是 Chrome v76+）已把它当作建议而非指令。它在以下场景大概率失效：
- 密码字段：Chrome 强制启用 autofill，
off被忽略 - 同域名下其他表单已成功提交过，当前 input 的
name或type匹配历史记录（如name="email"） - 用户手动从地址栏下拉选择，而非点击 input 触发
- 移动端 Safari 对
off支持更弱，常直接无视
真正可靠的绕过方式是：在真实 input 前插入一个 display: none 的 dummy input，把 autofill “骗”过去；或者用 JS 在加载后重置 input 的 value 并触发 input 事件，但这会影响无障碍访问和部分表单库的状态同步。
最麻烦的地方在于：没有一种方案能 100% 跨浏览器生效。Chrome 用 -webkit-autofill，Firefox 用 :-moz-autofill（支持度差），Safari 16.4+ 开始支持但行为不一致。你得根据目标浏览器占比，选一个主攻方案 + 一个降级 fallback，而不是指望一条 CSS 解决所有问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
