要消除 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 专属属性：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 显式设置：-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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！