直接写 background-color 无效是因为 WebKit/Blink 浏览器用高优先级内阴影（-webkit-box-shadow: inset）覆盖背景，需用大半径内阴影模拟背景色或超长 transition 延迟变色。
为什么直接写 background-color 无效
Chrome、Edge、Safari 等 WebKit/Blink 内核浏览器对 input:-webkit-autofill 的背景控制不是通过普通 background 层实现的，而是用一个高优先级的内阴影（-webkit-box-shadow: inset）硬叠加在输入框内部。你写的 background-color: #fff !important 会被这个阴影层盖住，根本没机会渲染——这不是选择器权重不够，是渲染层被绕过了。
input:-webkit-autofill 必须配 -webkit-box-shadow: inset
真正起效的写法是用足够大的内阴影“模拟”背景色：
-
-webkit-box-shadow: 0 0 0 1000px #f8f9fa inset !important—— 1000px 是扩张半径，确保完全填满输入框，别用小值（比如 10px） - 必须加
!important，否则浏览器内置样式仍会赢 - 要覆盖
input、textarea、select三类元素，尤其表单里用了textarea时容易漏掉 - 如果用了圆角或边框，也要同步加
border-radius和border，否则阴影会溢出
透明背景输入框不能用纯色阴影
如果你的输入框是 background: transparent，强行用 -webkit-box-shadow: inset 会遮盖掉原本的背景图或渐变效果。这时得换策略：
- 给
background-color加超长过渡延迟：transition: background-color 5000s ease-in-out 0s - 必须同时设置
-webkit-text-fill-color: #333 !important，否则 autofill 会把文字颜色强制设为深灰，破坏深色主题 - 这个技巧本质是让浏览器“想变黄也得等 1.4 小时”，用户感知不到变化，但样式始终按你的定义走
样式不生效？先查这三件事
写了代码却没反应，大概率卡在这几个地方：
立即学习“前端免费学习笔记（深入）”；
- 只写了
input:-webkit-autofill，没加:hover、:focus、:active状态，导致聚焦时黄色又冒出来 - CSS 放在
末尾或异步加载，而 autofill 在页面load阶段就已完成，样式来不及注入；建议内联或放在最顶部 - 以为
autocomplete="off"能禁用 autofill —— Chrome 自 2023 年起已基本无视它，尤其对密码字段；它只影响下拉提示，不影响填充行为
真正难的不是写出那几行 CSS，而是理解：浏览器对 autofill 的干预是主动渲染 + 强优先级组合拳，你得用同等级机制（box-shadow: inset 或超长 transition）去对冲，而不是靠覆盖。
