直接写 background-color 无效是因为 webkit 浏览器对 :autofill 状态施加了带 !important 的高优先级内联样式；最稳定方案是用 -webkit-box-shadow: 0 0 0 1000px #fff inset !important 覆盖，并同步设置 -webkit-text-fill-color 和 color，且需覆盖 hover/focus/active 状态，同时确保 autocomplete 属性正确（如 username/email 在 password 前）、表单包裹在 中。
为什么直接写 background-color 没用
因为 WebKit 浏览器（Chrome、Safari、Edge）给 :autofill 状态加了一层高优先级的内联样式，甚至带 !important，你写的普通 background-color 规则根本压不过它。不是你 CSS 写错了，是浏览器“锁死”了背景色。
input:-webkit-autofill 必须配 box-shadow: inset
这是目前最稳定、兼容性最好的覆盖方案：不用动背景，而是在输入框内部画一个“假背景”——用超大扩散半径的内阴影填满整个框体。
-
-webkit-box-shadow: 0 0 0 1000px #fff inset !important：1000px 的spread-radius确保无论输入框多高多宽都能盖住默认色 - 必须加
!important，否则部分 Chrome 版本（尤其是 120+）会忽略 - 别只写
box-shadow，还得同步设-webkit-text-fill-color，否则文字可能发灰或变黑 - 如果背景要透明或渐变，用
rgba()或hsla()替换颜色值，但注意 alpha 值太低时仍可能透出底层黄色
需要覆盖哪些状态？别漏掉 :focus 和 :hover
用户点击或悬停时，浏览器可能临时恢复默认样式，导致闪烁。所以得把状态链写全：
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px #f8f9fa inset !important;
-webkit-text-fill-color: #212529 !important;
color: #212529 !important;
}
注意：color 要重复写一次，不然某些旧版 Safari 在聚焦时文字会变蓝。
autocomplete 属性影响是否触发 :autofill
即使你样式写对了，如果 HTML 的 autocomplete 值不规范，浏览器根本不会进 :autofill 状态，自然也看不到效果。
- 账号字段必须用
autocomplete="username"或"email"，且要出现在密码框之前 - 密码框必须是
type="password"并设autocomplete="current-password" - 避免用
autocomplete="off"—— 现代 Chrome 已基本无视它；改用autocomplete="new-password"（仅用于注册页）更可靠 - 表单必须包裹在
<form></form>标签里，动态插入的 input 可能不被识别
真正难调的从来不是 CSS，而是让浏览器“认出这是可填充字段”——autocomplete 值错一位，后面所有样式都白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
