CSS实现文本框内右侧放置删除图标_容器相对定位图标绝对定位

张开发
• 2026/4/15 6:14:40 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

CSS实现文本框内右侧放置删除图标_容器相对定位图标绝对定位
右侧加删除图标需父容器设position: relative提供定位锚点图标用absolute定位并垂直居中事件委托监听点击、清空后focus并派发input事件IE11兼容需避免transform、统一box-sizing、用margin-right替代right值SVG图标更可控。input右侧加删除图标为什么用relative absolute因为本身是替换元素无法直接用::after伪元素插入内容也不能让子元素比如span/span自然贴右必须靠父容器“撑开定位上下文”再把图标作为子元素绝对定位到右边界。父容器设position: relative是为图标提供定位锚点否则absolute会往上层找容易错位图标元素如i classclear-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可能看起来太靠左或溢出。 arXiv Xplorer ArXiv 语义搜索引擎帮您快速轻松的查找保存和下载arXiv文章。

更多文章