唯一稳定方案是用input:-webkit-autofill配合-webkit-box-shadow:0 0 0 1000px #fff inset覆盖黄色背景，并设-webkit-text-fill-color控文字色；需同时覆盖hover/focus/active状态及textarea/select伪类，且spread半径不可减小以确保全覆盖。
直接结论：用 input:-webkit-autofill 配合 -webkit-box-shadow: 0 0 0 1000px #fff inset 覆盖黄色背景，再加 -webkit-text-fill-color 控制文字色——这是目前唯一稳定、无需 JS、跨 Chrome/Edge/Safari 的方案。
为什么 background-color 加 !important 也无效？
Chrome 不是“忽略”你写的样式，而是把自动填充背景实现为一个高优先级的内阴影层（box-shadow: inset），根本不在 background 渲染层级上。你改 background-color，等于在隔壁房间调灯——动作没错，但开关按错了地方。
-
input:-webkit-autofill是浏览器注入的伪类，自带强优先级规则（有时还带!important） - 它默认设的是类似
background-color: #ffeb3b或#FAFFBD，但这个值只是“占位”，实际渲染靠底层阴影 - 所以你必须用同层级的机制去对冲：即用另一个
box-shadow: inset盖过去
input:-webkit-autofill 必须连写哪些状态？
只写 input:-webkit-autofill 是最常见失效原因。浏览器在用户聚焦、悬停、点击时会动态切换伪类，漏掉任一状态，对应时刻就会回退到黄色底色。
- 必须同时覆盖：
input:-webkit-autofill、input:-webkit-autofill:hover、input:-webkit-autofill:focus、input:-webkit-autofill:active - 别忘了
textarea:-webkit-autofill和select:-webkit-autofill，尤其表单混用时 - 新版 Chrome/Edge 还支持
input:-internal-autofill-selected，加一行没坏处，不加也不影响主逻辑
-webkit-box-shadow: 0 0 0 1000px #fff inset 中的 1000px 能不能小点？
不能随意缩小。这个 1000px 是 spread radius（扩张半径），作用是确保阴影完全覆盖输入框内部所有区域，包括缩放后、rem 变化、圆角边缘等边界情况。
立即学习“前端免费学习笔记（深入）”；
- 如果输入框有
border-radius: 8px，而你只写10px，边缘大概率露黄底——不是选择器错，是 spread 值不够 -
#fff必须替换成你输入框真实的背景色（比如深色主题下是#2d3748），否则会显白边或色差 - 必须加
!important，否则浏览器内置样式仍可能赢过你的规则
透明背景或渐变背景输入框怎么办？
这时候不能“覆盖”，只能“拖延”。因为纯色内阴影会遮住你的透明/渐变设计，视觉上反而更糟。
- 给
background-color加超长过渡：transition: background-color 99999s ease-in-out 0s（单位是秒，不是毫秒） - 必须同步设置
-webkit-text-fill-color: #333，否则文字可能发灰、反色甚至不可读 - 旧版 iOS Safari 对
transition-delay支持不稳定，所以别依赖 delay，只拉长 duration 才真正跨设备可靠 - 这个方案本质是让变黄延迟到“人类感知不到”的程度，不是根治，但对多数产品已足够
真正难的不是写出那几行 CSS，而是意识到：浏览器对 autofill 的干预是主动渲染+强优先级组合，你得用同维度的机制（box-shadow: inset 或超长 transition）去对冲，而不是反复调 background-color 的优先级。
