input等替换元素不支持::before伪元素，因其渲染由浏览器底层控件决定；唯一可靠解法是用容器包装并对其应用伪元素，同时清除input默认样式并设置pointer-events: none。
input 是替换元素，::before 在规范层面被禁止
不是浏览器没实现，也不是你写错了 CSS，而是 input 属于 CSS 规范定义的「替换元素」（replaced element），::before 和 ::after 在这类元素上根本不会生成节点——DevTools 里完全看不到，content 再合法也无效。这和 img、textarea、select、video 一样，它们的渲染由浏览器底层控件决定，CSS 盒模型不接管其内部内容插入逻辑。
哪些 input 类型看似能用 ::before？别信错觉
某些浏览器（如 Chrome）对 input[type="checkbox"] 或 input[type="radio"] 允许 ::before 渲染，但这属于 UA 样式扩展行为，不是规范支持，也不跨浏览器稳定。你不能依赖它：
-
input[type="text"]、input[type="email"]、input[type="password"]等文本类输入框，在所有现代浏览器中均明确不支持伪元素 - 即使 DevTools 的 Styles 面板显示规则“已应用”，Computed 值里
content也会是none，且 Elements 面板无伪元素节点 - 试图用
!important、display: block或重置border都无法绕过该限制
为什么容器包装法是唯一可靠解法
真正能落地的方案，是把 input 包进一个普通容器（如 div），再对容器使用伪元素。关键不在“加一层 DOM”，而在于让伪元素挂载到非替换元素上：
- 容器必须设
position: relative，否则::before的position: absolute会相对于body定位，极易错位 -
input自身需清除默认内边距与边框（如border: none; padding: 8px; background: transparent;），否则视觉上会和伪元素打架 - 若伪元素只是装饰（如前缀图标），务必加
pointer-events: none，否则会拦截聚焦和点击 - 不要用
z-index强行“压”伪元素到input上层——它们不在同一渲染路径，z-index逻辑不适用
其他替代方案的适用边界
如果无法修改 HTML 结构（比如第三方组件只输出 input），就得退而求其次：
-
background-image+padding-left：适合图标类装饰，但无法做文字或动态内容 -
contenteditablediv模拟输入框：可自由用::before做占位符，但需手动处理表单提交、无障碍（role="textbox"+aria-label）、光标同步等细节 - JS 动态插入
span：可行但风险高——焦点管理、序列化遗漏、屏幕阅读器误读都可能出问题，不推荐作为首选
最常被忽略的点是：伪元素是否生效，第一反应不该是调样式，而是先确认目标元素是不是替换元素。一旦是 input、img、textarea 这类，就直接放弃 ::before，转去重构容器结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
