如何用CSS::before实现输入框前缀图标？

input不支持::before伪元素，因其属替换元素，CSS规范明确禁止；必须用容器包裹并设position: relative，再对容器应用::before，同时input需预留padding-left。

直接用 ::before 给 <input> 加图标行不通——它不支持伪元素，必须套一层容器。

为什么不能直接写 input::before？

浏览器规范明确禁止对替换元素（如 input、textarea、img）使用 ::before 或 ::after。你写上去不会报错，但内容完全不渲染，调试器里也看不到节点。

1. 常见错误现象：input::before { content: "?"; } 什么也不显示
2. 替代方案：必须用 <div class="input-wrapper"><input></div> 包裹，再对 wrapper 应用 ::before
3. 兼容性影响：所有现代浏览器一致不支持，不是 bug，是标准行为

正确结构：容器 + ::before + 内边距对齐

核心三步：父容器设 position: relative，伪元素绝对定位，input 补 padding-left 避免文字遮挡。

1. HTML 必须这样写：

   <div class="input-with-icon"><input type="text" placeholder="搜索..."></div>

2. 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;}

3. 注意：如果用 Font Awesome，font-family 和 font-weight 缺一不可，否则显示成方块

用 background-image 替代 content 的适用场景

当图标需要缩放、着色灵活或 SVG 矢量保真时，background-image 比 content 更可控，尤其适合带圆角/描边的输入框。

1. 示例：

   .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;}

2. 路径基准是 CSS 文件位置，不是 HTML 页面，容易 404；建议用内联 data URL 或 CSS 变量管理
3. background 方式无法用 color 改颜色，要换色得改图或切多份 SVG

真正容易被忽略的是可访问性——::before 插入的图标对屏幕阅读器不可见，如果它是功能标识（比如“密码可见”开关），必须额外加 aria-label 到 input 上，不能只靠视觉提示。