chrome等浏览器对input:-webkit-autofill的黄色背景采用高优先级内阴影实现，background-color即使加!important也无效；应使用-webkit-box-shadow: 0 0 0 1000px #fff inset覆盖，并配-webkit-text-fill-color控制文字色，且需覆盖:hover/:focus/:active全状态。
input:-webkit-autofill 本身不能靠 background-color 覆盖 Chrome 的黄色背景——不是你写错了，是浏览器压根不走这一层渲染。
为什么 background-color 设置无效
Chrome、Edge（Chromium 内核）、新版 Safari 对自动填充状态的背景实现为一个高优先级内阴影层，而非普通 background 层。即使加了 !important，background-color 仍被跳过。这不是兼容性 bug，而是 WebKit 渲染机制的主动设计。
用 box-shadow: inset 覆盖黄色背景
这是目前最稳定、跨版本兼容的方案，原理是“画一层纯色遮罩”而非“改背景”：
-
-webkit-box-shadow: 0 0 0 1000px #ffffff inset中的1000px是 spread radius，必须足够大，覆盖缩放后或 padding 较大的输入框 - 颜色值要和你真实背景一致，比如
#f8f9fa或rgba(255,255,255,0.9)，别硬写#fff导致色差 - 必须搭配
-webkit-text-fill-color: #333，否则文字可能变灰、反色或模糊 - 伪类要覆盖全状态：
input:-webkit-autofill、:hover、:focus、:active，否则聚焦时黄色会闪现
透明背景输入框怎么办
如果 background: transparent 是设计刚需，box-shadow 会破坏视觉。此时只能用 transition 延迟法：
-
transition: background-color 5000s ease-in-out 0s—— 时间设到用户感知不到变化（1.4 小时） - 必须同时写
-webkit-text-fill-color，否则文字色依然失控 - 这个 hack 对
background: none或background: linear-gradient同样有效 - 注意：不要只写
input:-webkit-autofill，漏掉交互态会导致 hover/focus 时样式回退
容易被忽略的生效条件
很多同学写了样式但没效果，问题常出在这些地方：
- CSS 必须在
顶部或内联加载，DOM 渲染前就得就位；异步加载的 CSS 很可能错过 autofill 触发时机 -
autocomplete="off"在 Chrome 120+ 已基本失效，尤其对密码字段，它只影响下拉提示，不影响填充行为 - Firefox 不支持
:-webkit-autofill，也不渲染黄色背景，所以不用额外处理；若看到异常色块，大概率是 Bitwarden 等密码管理器注入的样式 - 伪类只对真正被浏览器自动填充的字段生效——比如用户没点保存密码、或用了第三方插件填值，
:-webkit-autofill根本不会匹配
真正难的不是写出那几行 CSS，而是理解浏览器把 autofill 当作一个独立渲染通道来处理；你得用同等级别的底层机制（box-shadow: inset 或超长 transition）去对冲，而不是试图覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
