Chrome自动填充导致input背景变淡黄色，可用高权重CSS覆盖：.form-input:-webkit-autofill{background-color:#fff!important;color:#333!important;-webkit-text-fill-color:#333!important;transition:background-color 5000s}。
Chrome 浏览器在自动填充表单（如用户名、密码）后，会为 input 元素添加一个内置的 -webkit-autofill 伪类样式，导致背景变成难以控制的淡黄色，且默认优先级极高，普通 CSS 很难覆盖。
强制重置 -webkit-autofill 样式
最直接有效的方式是用高权重选择器覆盖其背景、文字颜色等属性：
- 给 input 添加一个 class（比如
.form-input），然后写如下规则：
background-color: #fff !important;
color: #333 !important;
-webkit-text-fill-color: #333 !important;
transition: background-color 5000s ease-in-out 0s;
}
其中 transition 是关键技巧：设置一个超长过渡时间（如 5000 秒），让 Chrome 认为“正在过渡中”，从而抑制其自动触发的闪烁或样式回退。
禁用自动填充（谨慎使用）
如果业务允许，可从源头避免该问题：
- 对非敏感字段，设
autocomplete="off"或更精确的值（如autocomplete="new-password"） - 密码类字段慎用
off，建议用autocomplete="current-password"或"new-password"配合逻辑处理 - 某些新版 Chrome 对
off忽略，推荐用随机字符串欺骗（如autocomplete="nope"），但不保证长期有效
动态监听并重绘（兼容性更强）
对于需要保留自动填充又追求视觉一致的场景，可用 JS 检测并手动重置：
- 监听
input的focus或DOMContentLoaded后延时检查 - 用
getComputedStyle(input).backgroundColor判断是否被 autofill 着色（注意：部分版本返回rgb()值） - 检测到后，临时移除再加回 class，或插入内联样式覆盖
示例简写：
setTimeout(() => {const el = document.querySelector('input');
if (window.getComputedStyle(el).backgroundColor.includes('255, 255, 204')) {
el.style.backgroundColor = '#fff';
}
}, 100);
额外提醒
这个行为仅限 WebKit 内核（Chrome/Safari），Firefox 和 Edge（Chromium 版）也受影响，但旧版 Edge（EdgeHTML）无此问题。设计时建议统一输入框 focus/autofill 状态下的边框、阴影等样式，避免只改背景却忽略整体一致性。
