不能直接用::after加图标，因为input是替换元素，不支持伪元素，浏览器直接忽略；必须用div容器设position: relative包裹，并对容器应用::after，同时input需预留padding-right且图标设display: block。

为什么不能直接用 ::after 伪元素加图标

因为 <input> 是替换元素，不支持子节点，::after 在它上面根本不会渲染。你写上也看不到——浏览器直接忽略。必须用真实 DOM 元素（比如 <i></i> 或 <svg></svg>）配合容器定位。

父容器必须设 position: relative

这是整个定位链的起点。没有它，图标上的 position: absolute 会向上逐层找最近的相对/绝对定位祖先；找不到就锚定到 ，结果大概率飘到页面右上角。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 父容器推荐用 <div class="input-wrapper"> 包裹 <code><input> 和图标
• 必须显式设置 display: inline-block 或 display: flex，否则在行内上下文中 relative 可能不生效
• 别忘了给 <input> 加 padding-right，留出图标空间，不然文字会顶到图标下面

top: 50% + transform: translateY(-50%) 为何有时偏移

问题常出在 SVG 或 <i></i> 图标默认是 display: inline，受 baseline 对齐影响。此时 top: 50% 的计算起点被下拉了，再怎么 translateY 都只是在错误起点上移动。

• 强制图标设 display: block，彻底脱离行内流
• 如果图标是 <img src="search.svg">，同样要加 img { display: block; }
• 检查 SVG 源码里的 viewBox，非 "0 0 W H" 会导致视觉偏移，重设更稳妥

点击图标时输入框无法聚焦？记得关 pointer-events

图标盖在输入框右侧，鼠标悬停或点击它时，默认会拦截事件，导致输入框收不到 focus 和 click。

• 给图标加 pointer-events: none，让鼠标事件穿透过去
• 如果需要响应点击（比如清空内容），就别设 pointer-events: none，改用 JS 监听图标点击，然后手动 input.focus() 并触发 input.dispatchEvent(new Event('input', { bubbles: true }))
• IE11 不支持 transform 垂直居中，得回退到 top: 50%; margin-top: -8px 这类固定值方案（前提是图标高度固定）
真正卡住人的不是写错 transform，而是没意识到图标在 CSS 里默认是个“文字字符”，不是个盒子——忘了先用 display: block 把它从行内流里拎出来，后面所有居中代码都在给一个错位的起点打补丁。