-webkit-box-shadow内阴影覆盖是最稳妥方案，需满足背景纯色且颜色值严格匹配；必须为input:-webkit-autofill及其交互伪类统一设置大扩展值内阴影、-webkit-text-fill-color和caret-color，并加!important。
直接用 -webkit-box-shadow 内阴影覆盖是最稳妥、兼容性最好的方案，但必须满足两个前提：输入框背景是纯色（非透明/非图片），且你清楚自己要覆盖成什么颜色。
为什么 -webkit-box-shadow: 0 0 0 1000px #fff inset 能生效
Chrome 对 input:-webkit-autofill 应用的黄色背景（#FAFFBD）是通过用户代理样式强制写死的，常规 background-color 加 !important 无效。但 -webkit-box-shadow 是一个“层叠在背景之上”的绘制属性，且它的 inset 模式会从内边距区域向内渲染——只要模糊半径和扩展半径足够大（比如 1000px），就能完全遮住底层的黄色，视觉上等同于重置背景。
这个技巧不改变 DOM 结构，不触发重排，也不依赖 JS，适合绝大多数生产环境。
-
0 0 0 1000px中的1000px是扩展值，不是模糊值；它必须大于 input 元素自身 padding + border 的总厚度，否则边缘可能漏色 - 颜色值（如
#ffffff）必须和你设计稿中 input 的真实背景色严格一致，否则会出现色差 - 该规则需同时作用于
input:-webkit-autofill及其伪类状态（:hover、:focus等），否则聚焦时黄色会闪现
必须写的完整选择器和关键声明
只写 input:-webkit-autofill 往往不够，Chrome 在不同交互阶段会动态切换伪类。下面这段是经过验证的最小可用组合：
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
-webkit-text-fill-color: #333333 !important;
caret-color: #333333;
}
注意三点：
-
-webkit-text-fill-color是唯一能可靠覆盖自动填充文字颜色的私有属性，color即使加!important也无效 -
caret-color用来确保光标颜色与文字一致，否则光标可能还是黑色或系统默认色 - 所有声明都带
!important，因为用户代理样式里大量用了!important，你必须对等反击
容易踩的坑：图标、圆角、透明背景全会破防
这个方案本质是“盖一层厚墙”，所以它对视觉结构有强假设：
- 如果 input 有背景图（比如左侧小图标用
background-image），内阴影会把图标一起盖掉——此时应把图标抽到::before伪元素或外层div中 - 如果 input 设置了
border-radius，而阴影扩展值又极大，可能导致圆角边缘出现轻微像素级错位（尤其在高 DPI 屏幕），可微调扩展值至500px并测试 - 如果 input 背景是
transparent或渐变，此法完全失效——改用transition延迟法或重构 DOM - 部分旧版 Chrome（≤87）对超大扩展值支持不稳定，若遇到闪烁，可降为
200px并补一层background-clip: padding-box
真正麻烦的从来不是怎么写这四行 CSS，而是你得确认整个表单里有没有人偷偷给 input 加了 background-image，或者设计师刚改了主色但没同步更新这里的 #ffffff —— 这些细节一旦漏掉，黄色就会在某个深夜的登录页突然复活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
