input不支持::before伪元素，因其属替换元素，CSS规范明确禁止；必须用容器包裹并设position: relative，再对容器应用::before，同时input需预留padding-left。
直接用 ::before 给 <input> 加图标行不通——它不支持伪元素，必须套一层容器。
为什么不能直接写 input::before？
浏览器规范明确禁止对替换元素（如 input、textarea、img）使用 ::before 或 ::after。你写上去不会报错，但内容完全不渲染，调试器里也看不到节点。
- 常见错误现象：
input::before { content: "?"; }什么也不显示 - 替代方案：必须用
<div class="input-wrapper"><input></div>包裹，再对 wrapper 应用::before - 兼容性影响：所有现代浏览器一致不支持，不是 bug，是标准行为
正确结构：容器 + ::before + 内边距对齐
核心三步：父容器设 position: relative，伪元素绝对定位，input 补 padding-left 避免文字遮挡。
- HTML 必须这样写：
<div class="input-with-icon"> <input type="text" placeholder="搜索..."> </div>
- CSS 关键部分：
.input-with-icon { position: relative; } .input-with-icon input { padding-left: 36px; /* 至少大于图标宽度 */ width: 100%; } .input-with-icon::before { content: "\1F50D"; /* ? Unicode */ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #999; } - 注意：如果用 Font Awesome，
font-family和font-weight缺一不可，否则显示成方块
用 background-image 替代 content 的适用场景
当图标需要缩放、着色灵活或 SVG 矢量保真时，background-image 比 content 更可控，尤其适合带圆角/描边的输入框。
立即学习“前端免费学习笔记（深入）”；
- 示例：
.input-with-icon::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url("search.svg") no-repeat center; background-size: contain; } - 路径基准是 CSS 文件位置，不是 HTML 页面，容易 404；建议用内联 data URL 或 CSS 变量管理
-
background方式无法用color改颜色，要换色得改图或切多份 SVG
真正容易被忽略的是可访问性——::before 插入的图标对屏幕阅读器不可见，如果它是功能标识（比如“密码可见”开关），必须额外加 aria-label 到 input 上，不能只靠视觉提示。
