chrome为自动填充字段强制渲染黄色背景是因input:-webkit-autofill伪类默认设background-color:#ffeb3b且优先级极高；最稳妥覆盖方案是box-shadow:0 0 0 1000px #fff inset!important；禁用autocomplete可根治但影响密码管理等功能；transition延迟仅为视觉hack，非真正修复。
Chrome 下 input:-webkit-autofill 强制渲染黄色背景的原因
Chrome 会为已保存的自动填充字段（比如用户名、密码）注入一层内建样式，核心就是 input:-webkit-autofill 伪类。它默认设置了 background-color: #ffeb3b（或类似浅黄），且这个样式优先级极高，普通 background 或 background-color 声明根本覆盖不了。
注意：这个变色只在「已有历史记录 + 页面加载后自动填充完成」时触发，不是每次输入都发生；焦点进入时若已填充内容，就会立刻生效。
用 box-shadow: inset 覆盖黄色背景最稳妥
这是目前兼容性最好、副作用最小的方案，原理是用极大范围的白色内阴影“盖住”底层黄色。
-
input:-webkit-autofill必须加!important，否则无效 - 推荐写法：
box-shadow: 0 0 0 1000px #fff inset !important;（#fff换成你实际背景色） - 不要用
rgba()，Chrome 对透明色的内阴影处理不稳定，可能漏出黄色 - 如果 input 有背景图，这个方法会遮挡图片——此时只能换方案
禁用 autocomplete 是根治但需权衡体验
设 autocomplete="off" 可彻底阻止自动填充行为，也就没了黄色背景。但它不只是关掉“下拉建议”，还会禁用密码管理器、地址自动补全等真实功能。
- 可局部关闭：
<input type="text" autocomplete="off"> - 也可全局关 form：
<form autocomplete="off"></form> - 现代 Chrome 对
autocomplete="off"的支持已弱化，某些字段（如type="password"）仍可能填充——这时得配合autocomplete="new-password"或随机 name
用 transition 延迟变色只是障眼法
给 input:-webkit-autofill 加超长 transition: background-color 5000s，本质是让黄色背景“5000秒后才生效”，视觉上等于没变。但它是 hack，不是修复。
问题在于：一旦用户清空再重填、或刷新页面，延迟重置会失效；而且它不改变实际背景色，对可访问性（如屏幕阅读器识别颜色对比度）无帮助。真正要保无障碍或严格 UI 控制时，别依赖这个。
真正难处理的是带背景图 + 必须保留 autocomplete 的场景——这时候得考虑改用 contenteditable div 模拟 input，或接受设计妥协。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
