必须用包裹和图标并用css定位实现视觉合并：图标设position: absolute右对齐且垂直居中，input设padding-right避遮挡；推荐嵌入svg而非字体图标，点击需手动绑定事件调用搜索函数，并补充回车支持。

怎么让输入框右边显示搜索图标

直接用 <input> 标签加 <i></i> 或 <svg></svg> 是行不通的——浏览器会把它们当成两个独立元素，没法对齐、点击也不联动。得用包裹容器 + CSS 定位来实现视觉合并。

• 必须用 <div> 包住 <code><input> 和图标，设为 position: relative
• 图标元素（比如 <svg></svg>）设 position: absolute，右对齐 + 垂直居中（用 top: 50% + transform: translateY(-50%)）
• <input> 右侧留出足够内边距（padding-right），避免文字被图标遮住

用 SVG 还是字体图标更稳妥

零基础推荐 SVG：不依赖外部字体文件，不会因加载失败变成方块或乱码，复制粘贴就能用，兼容性好到 IE9 都能显示。

• 不要用 <i class="icon-search"></i> 这类 Font Awesome 写法——没引入 CSS 就啥也不显示
• 直接嵌入一个精简的搜索 SVG，宽高设为 16px，颜色用 currentColor 自动继承文本色
• 如果非要字体图标，至少确保 CDN 地址写对：https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css

点击图标时怎么触发搜索

图标本身没交互逻辑，必须手动绑定点击事件，且要和输入框内容联动。别指望 type="search" 自动触发——它只影响语义和默认样式。


Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。
下载
• 给图标加 onclick="document.querySelector('#search-input').dispatchEvent(new Event('search'))" 是错的：没有监听 search 事件，也不会提交
• 正确做法：图标点击时，读取 <input id="search-input"> 的 .value，再调用你自己的搜索函数，比如 doSearch()
• 顺便给 <input> 加 onkeydown="if(event.key==='Enter') doSearch()"，支持回车搜索

为什么输入框聚焦时图标变色没反应

因为图标在 <input> 外部，:focus 伪类只作用于自身，无法直接控制兄弟节点。得靠父容器的 :has() 或 JS 监听。

• 现代浏览器（Chrome 105+、Firefox 121+）可用 div:has(input:focus) svg { opacity: 1; }
• 兼容老版本？只能用 JS：监听 input 的 focus 和 blur 事件，动态加/删类名控制图标样式
• 别忘了设置 outline: none 和自定义 box-shadow 来强化聚焦态，否则用户看不出是否激活

实际做时最容易卡在定位偏移和事件绑定漏掉回车支持——先跑通点击图标能搜，再补键盘逻辑，比一上来就堆 CSS 技巧更省时间。