要覆盖浏览器自动填充样式，需用input:-webkit-autofill伪类配合!important，设置-webkit-text-fill-color、-webkit-box-shadow和transition防闪。
浏览器自动填充（autocomplete）时，会为 input 添加内部伪类样式（如 Chrome 的 -webkit-autofill），导致你写的 CSS 无法直接覆盖文字颜色、字体大小等属性。要重写这些样式，关键在于用更高优先级的伪元素选择器，并配合 !important 强制生效。
使用 -webkit-autofill 伪类精准覆盖
Chrome、Edge、Safari 等基于 WebKit/Blink 的浏览器在自动填充时会给 input 添加 -webkit-autofill 状态。你可以这样写：
input:-webkit-autofill {
color: #333 !important;
font-size: 16px !important;
background-color: #fff !important;
}
注意：必须加 !important，否则浏览器内置样式会优先；background-color 也建议重置，避免黄色底色干扰文字显示。
解决 autofill 后文字“发虚”或颜色异常
有时即使设置了 color，文字仍显灰暗或模糊，这是因为浏览器还加了内阴影。可一并清除：
-
-webkit-text-fill-color: #333 !important;（比 color 更底层，专用于 autofill 文字） -
-webkit-box-shadow: 0 0 0 1000px white inset !important;（用超大内阴影覆盖默认黄色背景） -
transition: background-color 5000s ease-in-out 0s;（可选：防止页面加载瞬间闪黄）
兼容 Firefox 的 autofill 样式
Firefox 不支持 -webkit-autofill，但会在 input 上添加 :-moz-autofill 伪类（需启用实验性功能，且支持有限）。更稳妥的做法是监听 input 或 DOMContentLoaded 事件，用 JS 检测是否已填充：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
if (input.matches(':autofill') || input.ownerDocument.querySelector('input:-webkit-autofill')) {
input.style.color = '#333';
input.style.fontSize = '16px';
}
不过实际项目中，聚焦/失焦后手动触发一次样式重设往往更可靠。
推荐的完整 CSS 写法（含过渡防闪）
把以下样式加到全局或对应组件中，基本覆盖主流场景：
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset !important;
-webkit-text-fill-color: #333 !important;
font-size: 16px !important;
transition: background-color 5000s ease-in-out 0s;
}
其中 transition 是个技巧：让背景色“延迟切换”，视觉上消除自动填充瞬间的黄色闪烁。
