background-color: transparent 可实现 input 透明背景，但需重置 border、outline，覆盖 UA 样式（如 IE/Edge 中用 !important），并处理 iOS placeholder 背景、焦点提示等兼容性问题。
直接设置 background-color: transparent 有效但有陷阱
绝大多数情况下，background-color: transparent 就能实现 <input> 的透明背景，但必须注意：浏览器默认会为 input 添加内边距（padding）和边框（border），这些样式会让“透明”看起来不纯粹——比如白色边框或灰色阴影仍会遮挡底层内容。
实操建议：
- 务必同时重置
border和outline，否则聚焦时可能意外弹出蓝色外框 - 检查父容器是否设置了
background-color或background-image，透明只是“透过去”，不是“变无” - 某些旧版 Safari 对
transparent解析不稳定，可降级用rgba(0,0,0,0)
IE/Edge Legacy 中 input 背景变灰的真正原因
在 IE10–11 或旧 Edge 中，即使写了 background-color: transparent，输入框仍可能呈现浅灰色背景。这不是 bug，而是系统主题样式（input[type="text"] 的 UA stylesheet）强制设了 background-color: #fff 且权重更高。
解决方法只有覆盖 UA 样式：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
!important强制生效（如background-color: transparent !important） - 确保 CSS 选择器权重 ≥ 浏览器默认值（例如用
input[type="text"]而非单纯input） - 避免依赖
filter: opacity()模拟透明——它会让整个元素（含文字）变淡，不符合“仅背景透明”需求
移动端 iOS Safari 的 placeholder 颜色干扰问题
iOS Safari 下，即使 input 背景完全透明，placeholder 文字仍可能带半透明白底（尤其在深色模式下），导致文字可读性骤降。这不是背景不透明，而是 WebKit 对 ::placeholder 的渲染叠加了背景层。
修复方式：
- 显式设置
::placeholder的background-color: transparent - 必要时加
color: inherit避免 placeholder 文字被系统强设为浅灰 - 不要用
background: none替代background-color: transparent，前者不重置渐变或图片背景，兼容性更差
使用 background: rgba(0,0,0,0) 还是 transparent？
两者在现代浏览器中效果一致，但语义和兼容性有细微差别：transparent 是关键字，专用于背景色；rgba(0,0,0,0) 是颜色值，可参与 CSS 变量计算，也兼容更早的 Android Browser。
推荐策略：
- 纯透明背景 → 优先用
background-color: transparent（语义清晰、体积小） - 需要动态控制透明度（如通过 JS 修改 alpha 值）→ 用
rgba()，方便插值计算 - 若项目需支持 Android 4.3 及更早版本 → 必须用
rgba()，因部分版本不识别transparent作为background-color值
最易被忽略的一点：透明背景的 input 在 focus 状态下，如果没重置 outline 或自定义 box-shadow，用户可能完全看不出当前焦点在哪——这对可访问性是硬伤，别为了视觉干净牺牲基本交互反馈。
