chrome/safari自动填充背景色抢眼是因为浏览器通过高优先级内联样式强制渲染，唯一有效覆盖方式是使用input:-webkit-autofill伪类组合（含hover/focus/active态），配合-webkit-box-shadow:0 0 0 100px white inset!important覆盖背景、-webkit-text-fill-color控制文字色，并用transition:background-color 5000s延迟变色实现视觉隐藏。
Chrome/Safari 自动填充背景色为什么总是抢眼
因为浏览器强制加了内联样式，且优先级极高——input:-webkit-autofill 是唯一能覆盖它的 CSS 钩子。不加 !important 基本无效，不是你写错了，是浏览器在“硬刚”你的样式表。
怎么用 : -webkit-autofill 覆盖黄色/白色背景
核心是两件事：清掉默认背景、锁住过渡动画。常见错误是只写 input:-webkit-autofill，漏掉交互态，导致 hover/focus 时又闪回原色。
- 必须同时匹配：
input:-webkit-autofill、input:-webkit-autofill:hover、input:-webkit-autofill:focus、input:-webkit-autofill:active - 用
-webkit-box-shadow: 0 0 0 100px white inset !important盖掉背景（比background-color更可靠） - 用
-webkit-text-fill-color: #333 !important控制文字色，避免灰白难读 - 加过渡延迟：
transition: background-color 5000s ease-out, color 5000s ease-out !important—— 不是真要等 5000 秒，而是让变化慢到人眼不可见
Firefox 和其他非 WebKit 浏览器怎么办
Firefox 目前不支持 :-webkit-autofill，也不实现标准化的 :autofill（尽管规范已存在）。实际表现是：自动填充后几乎无背景变化，或仅轻微变暗，视觉干扰极小。所以不用为 Firefox 单独写 hack，反而加了可能破坏原有渲染。
如果你发现 Edge 或新版 Safari 出现异常，先确认是否启用了实验性功能（如 layout.css.autofill-color.enabled），这类 flag 可能绕过传统伪类规则。
容易被忽略的兼容性细节
某些 Chrome 版本（尤其是 120+）开始支持 input:-internal-autofill-selected，但它和 :-webkit-autofill 并存，且行为不一致：前者更偏向“用户点击确认填充后”的状态，后者是“浏览器刚注入值就触发”。如果页面有动态聚焦逻辑，建议两个都写，但以 :-webkit-autofill 为主力。
另外，transition-delay 在部分旧版 iOS Safari 中不生效，所以别依赖它做渐变控制——直接拉长 duration 才是真正跨设备稳定的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
