右侧加删除图标需父容器设position: relative提供定位锚点，图标用absolute定位并垂直居中；事件委托监听点击、清空后focus并派发input事件；ie11兼容需避免transform、统一box-sizing、用margin-right替代right值；svg图标更可控。
input右侧加删除图标为什么用relative + absolute
因为本身是替换元素，无法直接用::after伪元素插入内容，也不能让子元素（比如<span></span>）自然贴右；必须靠父容器“撑开定位上下文”，再把图标作为子元素绝对定位到右边界。
- 父容器设
position: relative是为图标提供定位锚点，否则absolute会往上层找，容易错位 - 图标元素（如
<i class="clear-icon"></i>）设position: absolute; right: 8px; top: 50%; transform: translateY(-50%)才能垂直居中对齐文本框 - 别忘了给父容器加
display: inline-block或display: flex，否则relative在行内元素上可能失效
删除图标点击后清空input值的JS怎么写才不踩坑
常见错误是绑定事件时没考虑动态插入的input、或没阻止冒泡导致触发多次；更隐蔽的是清空后焦点丢失，用户还得手动点回去。
- 推荐用事件委托：监听父容器的
click，用e.target.matches(".clear-icon")判断是否点中图标 - 清空后立刻调用
inputEl.focus()，保持可编辑状态 - 记得加
inputEl.value = ""之后触发inputEl.dispatchEvent(new Event("input", { bubbles: true }))，否则Vue/React等框架监听不到值变化 - 图标要加
tabindex="-1"，避免键盘导航时意外聚焦到装饰性图标上
兼容IE11时absolute定位偏移量算不准怎么办
IE11对input的border-box计算有偏差，尤其当设置了padding-right或box-sizing不一致时，right: 8px可能看起来太靠左或溢出。
- 统一给input和父容器都设
box-sizing: border-box - 改用
right: 0+padding-right预留空间，再让图标margin-right: 8px，比纯right值更稳定 - 避免用
top: 50%+transform做垂直居中——IE11里transform在absolute元素上有时不生效，改用top: 0; bottom: 0; margin: auto 0配合固定高
图标用SVG还是字体图标？哪个更可控
SVG胜在尺寸、颜色、响应式控制精准，字体图标在缩放或font-smoothing开启时边缘易发虚，且无法单独控制图标的fill色而不影响文字。
- 直接内联
<svg><path d="..."></path></svg>，方便用CSS设fill: currentColor随文本色自动变色 - 如果用字体图标（如Font Awesome），务必加
font-size和line-height确保垂直居中，且避免被父级font简写重置 - 图标容器（如
<span class="icon-wrap"></span>）建议设width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center，比纯absolute更抗干扰
input事件、以及IE下transform失效时没降级方案。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
