chrome自动填充时输入框变黄是其内置样式行为，需用-webkit-autofill伪类配合内阴影和!important覆盖，直接设background-color常因渲染机制失效。
Chrome 自动填充时输入框变黄是怎么回事
这是 Chrome 浏览器对 input[type="text"]、input[type="email"] 等表单控件启用自动填充（autofill）后，内置的默认样式行为。Bootstrap 本身不控制这个颜色，但它的基础样式（比如 border、background-color）会被 Chrome 的 :-webkit-autofill 伪类覆盖，导致视觉冲突。
用 :-webkit-autofill 覆盖黄色背景
必须用带前缀的伪类，并提高 CSS 优先级（例如加 !important），否则 Bootstrap 的样式会赢。注意：该伪类只在 WebKit 内核浏览器（Chrome / Safari / Edge 新版）生效，Firefox 不支持。
常见写法示例：
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px #fff inset !important;
-webkit-text-fill-color: #333 !important;
}
-
-webkit-box-shadow: 0 0 0 30px #fff inset是最稳定的方式——用内阴影“盖住”原黄色底色，比直接设background-color更可靠（Chrome 有时会忽略后者） -
-webkit-text-fill-color必须显式设置，否则文字可能变灰或不清晰 - 一定要加
!important，否则 Bootstrap 的.form-control样式会覆盖它 - 建议作用于具体输入框，比如
.form-control:-webkit-autofill，避免全局污染
为什么 background-color 直接设置经常失效
Chrome 对 :-webkit-autofill 的渲染逻辑特殊：它会把自动填充背景作为“层叠底层”，而普通 background-color 可能被跳过或降权。实测中，以下写法大概率无效：
input:-webkit-autofill { background-color: white !important; }
原因包括：
- Chrome 85+ 后加强了 autofill 样式的隔离机制
- 如果输入框有
transition（如 Bootstrap 的.form-control默认带transition: border-color .15s ease-in-out），会进一步干扰背景渲染 - 某些情况下需同时重置
background-image和background-color
兼容性与副作用要注意什么
这个方案不是银弹。实际项目里容易漏掉几个关键点：
- 如果用了 CSS-in-JS（如 Emotion、Styled Components），需确认是否支持
:-webkit-autofill插值；部分工具链会过滤掉带连字符的伪类 - Safari 有时会保留轻微高亮（尤其深色模式下），可追加
-webkit-background-clip: text辅助调试 - 不要给
:-webkit-autofill加border或outline，容易引发聚焦态异常（比如失去:focus样式） - 移动端 iOS Safari 表现和桌面 Chrome 不完全一致，务必真机测试
最稳妥的做法是：只用内阴影盖底色 + 显式填色，其他样式保持克制。复杂交互场景下，宁可监听 animationstart 检测 autofill 发生，再 JS 补丁，也别堆砌无效 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
