Chrome/Edge/Safari自动填充导致输入框背景变黄或变蓝，根本原因是浏览器将填充背景实现为高优先级内阴影层而非background，故background-color加!important也无效；必须用input:-webkit-autofill配合-webkit-box-shadow: 0 0 0 1000px #fff inset覆盖，且需同时声明hover/focus/active状态及textarea/select伪类。
直接说结论：Chrome/Edge/Safari 自动填充后背景变黄或变蓝，background-color 加 !important 也无效——必须用 input:-webkit-autofill 配合 -webkit-box-shadow: 0 0 0 1000px #fff inset 覆盖，否则改不掉。
为什么 background-color 在 input:-webkit-autofill 里总失效？
浏览器不是“忘了”你写的样式，而是把自动填充背景实现为一个高优先级的内阴影层（不是 background），background-color 根本碰不到它。你加 !important 后依然被忽略，是机制问题，不是选择器不够具体。
-
-webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset中的1000px是 spread radius，必须足够大才能覆盖所有尺寸（包括缩放、rem 变化） - 这个阴影不模糊、无偏移，视觉上就是纯色背景，但绕过了浏览器对 background 的封锁
- 如果输入框用了
border-radius，且阴影半径不够大，边缘会露底色——这时不是写错了，是 spread 值太小
哪些状态必须一起写，否则 hover/focus 时黄色又弹出来？
只写 input:-webkit-autofill 是最常见的漏项。浏览器在用户交互过程中会动态切换伪类状态，漏掉任一状态，对应时刻就会回退到默认样式。
- 必须同时覆盖：
input:-webkit-autofill、input:-webkit-autofill:hover、input:-webkit-autofill:focus、input:-webkit-autofill:active - 别忘了
textarea和select，尤其表单里混用时，textarea:-webkit-autofill同样会变黄 - 新版 Chrome/Edge 还支持
input:-internal-autofill-selected，虽非必需，但加一行没坏处
透明背景或圆角严重时，box-shadow 方案失效怎么办？
当输入框本身是 background: transparent 或用了复杂渐变/图片背景时，用纯色内阴影会遮住底层设计。这时候不能“覆盖”，只能“拖延”。
立即学习“前端免费学习笔记（深入）”；
- 给
background-color加超长过渡：transition: background-color 5000s ease-in-out 0s，单位是秒，不是毫秒 - 必须同步设置
-webkit-text-fill-color: #333，否则文字可能发灰、反色或不可读 - 该方案在旧版 iOS Safari 上
transition-delay不生效，所以不要依赖 delay，而是拉长 duration（比如 99999s）才真正跨设备稳定
容易被忽略的加载和兼容性细节
样式写了但没生效，大概率卡在这几个地方：
- CSS 文件异步加载或晚于 DOM 渲染注入，而 autofill 发生在
load阶段前——建议把这段规则放在<head>最顶部，或直接内联 -
autocomplete="off"对现代 Chrome/Edge 完全无效，尤其type="password"或name="password"字段，它只影响下拉提示，不影响填充行为 - Firefox 不支持
:-webkit-autofill，也不渲染明显背景色，不用额外 hack；若看到异常色块，很可能是 Bitwarden 等密码管理器注入的样式
真正难的不是写出那几行 CSS，而是意识到：浏览器对 autofill 的干预是主动渲染 + 强优先级组合，你得用同等级机制（box-shadow: inset 或超长 transition）去对冲，而不是靠选择器权重硬刚。
