Chrome/Edge中需用input:-webkit-autofill等全状态伪类配合-webkit-box-shadow: inset和-webkit-text-fill-color覆盖自动填充样式，Firefox/Safari无统一方案，仅能降级处理。
Chrome/Edge中:autofill基本不生效，得用:-webkit-autofill
直接写 input:autofill { background-color: #fff; } 在 Chrome 和 Edge 里大概率没反应——不是语法错，而是浏览器只认 :-webkit-autofill 这个私有伪类，且它仅在 autofill 触发后、元素仍处于 :focus 或 :hover 状态时才激活。页面加载完自动填充完成、焦点移走，样式就回退了。
实操建议：
- 必须写全状态：
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active - CSS 要放在
<head>最顶部或内联，避免因加载延迟错过 autofill 渲染时机 - 别依赖
autocomplete="off"—— Chrome 自 2023 年起已无视该属性对密码字段的禁用，它只影响下拉提示，不影响填充行为
background-color 加 !important 也无效？用 box-shadow: inset 覆盖
Chromium 内核把 autofill 背景色实现为一个高优先级内阴影层，background-color 即使加 !important 也会被压掉。这不是你 CSS 写得不够狠，是渲染层优先级问题。
正确做法是用 -webkit-box-shadow 模拟背景：
立即学习“前端免费学习笔记（深入）”；
-
-webkit-box-shadow: 0 0 0 1000px #f8f9fa inset;——1000px的 spread radius 确保覆盖所有尺寸（含缩放） - 颜色填你想要的背景色，比如深色主题就用
#2d3748，透明背景就用rgba(255,255,255,0) - 必须加
!important，否则浏览器内置规则仍可能赢
文字颜色总被强制变黑？必须用 -webkit-text-fill-color
Chrome autofill 不仅锁背景，还会硬设文字色为 #222 或 #333，哪怕你写了 color: white; 也无效。这是为了保障可读性，但会破坏深色主题。
唯一可靠覆盖方式：
-
-webkit-text-fill-color: #fff !important;—— 注意!important不可省，否则被内联样式压制 -
color属性可以保留，但只是降级兜底，不起实际作用 - 如果输入框有
::placeholder，它不受 autofill 影响，无需额外处理
Firefox/Safari 怎么办？没有银弹，只有降级策略
Firefox 完全不支持 :-webkit-autofill，也不支持标准化 :autofill；Safari 支持但极不稳定——常只在 <input type="password"> 生效，email 或 text 字段多数时候无响应。
能做的只有两件事：
- 监听
input事件 +setTimeout检查值变化（非实时，但全浏览器兼容） - 页面加载后遍历所有
input，用el.value && !el.matches(':placeholder-shown')判断是否已被填充，再手动加类
真正难的不是写出那几行 CSS，而是接受：浏览器对 autofill 的样式干预是主动、强优先级、多层渲染的，你只能用同层级机制（如 box-shadow: inset）去对冲，而不是靠选择器权重硬刚。
