html规范禁止input包含子元素，图标需用容器包裹并配合padding-right与absolute定位实现右对齐，同时设置父容器position:relative以确保z-index生效，并注意pointer-events和移动端光标偏移问题。

input 内部不能放绝对定位图标

直接把 <i class="icon-clear"></i> 塞进 <input> 标签内部是无效的——HTML 规范不允许 input 包含子元素，浏览器会自动忽略或剥离它。你看到的“图标在输入框里”，其实是 DOM 结构被修正后，图标被渲染到了 input 外部、又恰好被 CSS 拉到了视觉重叠位置，但此时它和 input 不在同一 stacking context 中，极易遮挡光标或文字。

右对齐图标必须靠 padding-right + 容器包裹

正确做法是让图标和 input 处于同一父容器（如 <div class="input-wrapper">），然后： <ul> <li>给 <code>input 设置 padding-right，留出图标空间（比如 padding-right: 32px）

图标用 position: absolute 定位到容器右内边距区域，right: 8px + top: 50% + transform: translateY(-50%)

容器本身必须设 position: relative，否则绝对定位图标会相对于 body 锚定

图标元素加 aria-hidden="true"，避免屏幕阅读器误读

z-index 失效常因父容器没开启定位上下文

即使图标设置了 z-index: 999，如果它的父容器（.input-wrapper）没设 position: relative，这个 z-index 就不生效；更糟的是，如果父容器有 overflow: hidden 或 transform，还会隐式创建新层叠上下文，把图标“关”在局部层级里，永远盖不住 input 的文字。

常见错误现象：点击清空图标时，鼠标悬停无反馈、光标移到图标上就消失、输入长文本时文字被截断在图标左侧。

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

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

下载

移动端光标偏移与 Safari 兼容陷阱

纯 CSS 绝对定位图标在 iOS Safari 和部分安卓 WebView 中会导致光标定位不准——浏览器无法将点击坐标映射到 input 的实际可编辑区域。这不是 bug，而是规范行为：当非表单控件覆盖 input 可见区域时，焦点事件可能被拦截或错位。

规避方式：

• 图标区域设置 pointer-events: none（仅限纯展示图标）
• 若需响应点击，改用 pointer-events: auto，但必须确保图标 z-index 高于 input，并且 input 自身不设 z-index
• 测试时务必在真机 Safari 和微信安卓版打开，模拟器无法复现光标偏移

最稳妥的路径不是硬调定位，而是用语义化结构（如 Bootstrap input-group）或框架自带的输入框封装——它们内部已处理了焦点穿透、可访问性和响应式对齐。