要消除 autofill 黄色背景，需用 -webkit-box-shadow: inset 覆盖，默认写法为 input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: #333 !important; }，并扩展至 hover/focus/active 状态。
在 H5 页面中，Chrome、Edge 和 Safari 等 WebKit 内核浏览器对自动填充（autofill）状态的输入框会强加一层黄色或高亮背景色，这不是通过普通 background-color 实现的，而是用高优先级的内阴影（-webkit-box-shadow: inset）渲染的。所以想“改变阴影和背景”，本质不是覆盖 background，而是用更可靠的 inset 阴影去替代它。
用 -webkit-box-shadow: inset 覆盖默认背景色
浏览器把 autofill 背景色画成一个不可见但优先级极高的内阴影层，直接设 background-color 无效，甚至加 !important 也常被忽略。唯一稳定方式是用同样底层机制反制：
- 写法示例：
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; } -
0 0 0表示无偏移、无模糊；1000px是扩散半径，必须足够大，确保覆盖所有尺寸（包括缩放、响应式变化） -
#ffffff换成你设计稿要求的背景色，比如浅灰#f8f9fa或带透明度的rgba(255,255,255,0.9) - 必须加
!important，否则浏览器内置样式仍可能赢
同时控制文字颜色：用 -webkit-text-fill-color
自动填充后，color 属性经常失效，文字可能变灰、发暗甚至反色。这时只能依赖 WebKit 专属属性：
- 显式设置：
-webkit-text-fill-color: #333 !important; - 即使写了
color: #333，也建议一并加上，但以-webkit-text-fill-color为准 - placeholder 不受影响，无需额外处理
::placeholder
覆盖所有交互态，避免 hover/focus 时闪回原色
只写 input:-webkit-autofill 不够——用户鼠标悬停、聚焦、点击时，浏览器可能切换到其他内部状态，导致黄色又冒出来：
立即学习“前端免费学习笔记（深入）”；
- 务必连写四种状态：
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active - 如果表单里用了
textarea或select，也要一并加上，例如：textarea:-webkit-autofill, select:-webkit-autofill - 建议把这段 CSS 放在
最顶部或内联，避免因异步加载导致样式注入晚于 autofill 渲染
透明背景场景：用 transition 延迟法“视觉隐藏”
如果你的输入框本身是 background: transparent，用纯色 inset 阴影会破坏设计。此时不能覆盖，只能“拖延”变色：
- 加长背景色过渡时间：
transition: background-color 5000s ease-in-out 0s !important; - 原理是让浏览器想把背景变黄，也得等 1.4 小时——用户完全感知不到
- 必须同步加
-webkit-text-fill-color，否则文字仍可能异常 - 注意：旧版 iOS Safari 对
transition-delay支持不稳，推荐只拉长duration，别依赖 delay
