Chrome和Edge中:autofill仅在聚焦或hover时生效，且背景色被锁定，须用-webkit-autofill、box-shadow或background-image绕过；文字色需-webkit-text-fill-color强制覆盖；Firefox不支持，Safari支持不稳定；最可靠方案是监听animationstart事件捕获autofill动画并添加类名。
Chrome 和 Edge 中 :autofill 伪类的实际行为
Chrome 和 Edge（基于 Chromium）确实支持 :autofill，但它不是标准 CSS 伪类，而是浏览器私有实现，且**仅在 autofill 触发后、元素仍处于聚焦或 hover 状态时才生效**。单纯写 input:autofill { background: yellow; } 很可能不生效——因为 autofill 填入后焦点常已移走，样式瞬间回退。
更关键的是：Chromium 会强制给 autofill 输入框加一层「不可覆盖的背景层」，直接设置 background-color 会被忽略。必须用 box-shadow 或 background-image 绕过。
实操建议：
- 优先用
input:-webkit-autofill（带前缀，兼容性更稳） - 配合
transition: background-color 0s;防止 Chrome 默认的淡入动画干扰 - 用
background-image: linear-gradient(transparent, transparent);覆盖掉浏览器默认背景层，再设background-color - 若需文字颜色适配，也得加
-webkit-text-fill-color，否则可能被 autofill 强制设为深色
-webkit-text-fill-color 必须同步设置的原因
Chrome autofill 不仅改背景，还会把文字颜色硬设为 #222 或 #333，哪怕你写了 color: white; 也无效。这是为了确保文字在浅色背景上可读，但会破坏你的深色主题设计。
立即学习“前端免费学习笔记（深入）”；
解决方法只有一条路：显式覆盖文本渲染：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 加
-webkit-text-fill-color: #fff !important;（注意!important，否则被浏览器内联样式压倒） - 同时设
-webkit-box-shadow: 0 0 0px 1000px #4a5568 inset;比纯 background 更可靠——它用内阴影模拟背景色，绕过 autofill 的背景锁定 - 避免用
opacity或filter，它们会导致文字模糊或触发重绘异常
Firefox 和 Safari 完全不支持 :autofill
Firefox 没有等效伪类；Safari 从 iOS 17 / macOS 14 开始支持 :autofill，但行为不稳定——比如只在密码字段生效，普通 text 或 email 字段常无响应。
这意味着：如果你依赖 :autofill 做视觉反馈，必须准备降级方案：
- 监听
input事件 +setTimeout检查值变化（非实时，但兼容所有浏览器） - 用
document.addEventListener('DOMContentLoaded', ...)后遍历input，检查input.value是否非空且input.matches(':focus-within')为 false，粗略判断是否被 autofill - 不要指望 JS 能准确区分用户输入和 autofill —— 浏览器不暴露该信息
真正可靠的 autofill 检测：靠 JS 监听 animationstart
Chromium 在 autofill 发生时，会给输入框触发一个名为 autofill 的 CSS 动画（即使你没定义）。这个动画名是固定的、不可见的，但可以监听：
input.addEventListener('animationstart', (e) => {
if (e.animationName === 'autofill') {
input.classList.add('autofilled');
}
});
然后在 CSS 里写：
.autofilled {
background-color: #4a5568 !important;
-webkit-text-fill-color: #fff !important;
}
这个方案比纯 CSS :autofill 更可控，且能跨浏览器统一处理 class。唯一要注意的是：动画可能在页面加载时批量触发，需防重复添加 class。
复杂点在于，autofill 可能发生在表单提交后重新加载页面时，也可能在用户切换 tab 后回来才触发——这些时机都不可预测，所以监听不能只做一次。
