结论是用 input:-webkit-autofill 配合 box-shadow: 0 0 0 1000px #fff inset 覆盖背景色，并用 -webkit-text-fill-color 控制文字颜色，这是目前最稳定、兼容性最好的方案；因 Chrome 等浏览器对自动填充状态应用了高优先级内部样式，background-color 直接设置常被忽略，而 inset box-shadow 是绕过限制的视觉替代方案。
直接说结论：用 input:-webkit-autofill 配合 box-shadow: 0 0 0 1000px #fff inset 覆盖背景色，再用 -webkit-text-fill-color 控制文字颜色——这是目前最稳定、浏览器兼容性最好的方案。
为什么 background-color 直接写无效？
浏览器（尤其是 Chrome/Safari/Edge）对自动填充状态的样式应用了极高优先级的内部规则，有时还带 !important。单纯写 background-color: white 很可能被忽略或只在部分状态下生效。
- 根本原因是
:autofill状态下的渲染层优先级高于普通 CSS 层 -
box-shadow: ... inset是绕过该限制的“视觉替代方案”，它不改背景，而是在内容层下方画一个纯色遮罩 - 阴影的
spread radius（如1000px）必须足够大，才能确保覆盖所有可能的输入框尺寸（包括缩放后）
必须同时设置文字颜色
自动填充后，color 属性经常失效，浏览器会强制使用自己的文字色（比如深灰或黑色反差极低）。这时候只能靠 WebKit 专属属性：
- 必须用
-webkit-text-fill-color: #333显式指定文字色 - 即使你写了
color: #333，也得加!important，但依然不如-webkit-text-fill-color可靠 - 如果输入框有 placeholder，
::placeholder样式不会影响已填充的文字，无需额外处理
要不要加 !important 和 transition hack？
要，而且建议加全：
-
!important几乎是必须的——否则样式大概率被浏览器内置规则压制 - 过渡动画会导致填充后背景/文字色“闪一下”，加
transition: background-color 5000s ease-in-out 0s !important是业内通用 trick，本质是把过渡时间拉长到“人类感知不到变化”的程度 - 推荐组合写法：
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active，覆盖所有交互态
Firefox 和其他非 WebKit 浏览器怎么办？
Firefox 目前不支持 :-webkit-autofill，也不支持标准化的 :autofill（尽管规范已存在，但实现仍弱）。实际表现是：
- Firefox 自动填充后通常不加背景色，或仅轻微变色，视觉冲突小得多
- 如果你发现 Firefox 下也有异常色块，大概率是用了第三方密码管理器（如 Bitwarden）注入的样式，而非浏览器原生行为
- 真要统一处理，可考虑 JS 检测
autocomplete值 +value长度 + 定时轮询，但成本高、不可靠，一般项目不值得做
真正容易被忽略的是：这个伪类只对 autocomplete 属性有效且用户实际触发了浏览器自动填充的字段起作用。如果表单是 SPA 动态渲染、或 autocomplete="off" 写死、或字段 name / type 不符合浏览器识别逻辑，:-webkit-autofill 根本不会匹配上——别怪样式没生效，先检查这些基础条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
