推荐用 <div> 包裹 <input> 和 <svg> 图标，通过 position: relative/absolute 定位、flex 布局自适应、padding-left 预留空间，并确保 aria-hidden="true" 和 aria-label 保障可访问性。
怎么用 <input type="search"> 加图标而不靠 JS
原生 type="search 输入框本身不渲染图标，但可以通过 CSS 的 ::-webkit-search-decoration 和 ::-webkit-search-cancel-button 控制默认样式；真正稳定可控的方式是用 <div> 包裹 <input> + <svg> 或字体图标。关键不是“能不能加”，而是“加在哪、谁控制宽高、谁响应点击”。
常见错误是直接把 <svg> 塞进 <input> 里——HTML 不允许这样嵌套，浏览器会自动剥离。
- 把图标放在
<input>外层<div class="search-box">内，用position: relative定位 - 图标用
<svg>（推荐）或<i>（需额外加载字体），避免图片请求和缩放失真 -
<input>本身设padding-left留出图标空间，值要 ≥ 图标容器宽度 + 间距 - 图标容器设
pointer-events: none（如果只是装饰），或绑定click清空内容（需 JS）
用 Flex 布局让搜索框自适应且居中对齐
很多搜索框在不同屏幕下错位、图标跑偏，本质是没处理好容器内元素的流式关系。Flex 是目前最稳妥的方案，比 float 或 inline-block 更可控。
典型场景：导航栏右侧固定宽度搜索框，或全屏居中带放大镜图标的搜索区。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex+align-items: center，解决垂直对齐问题 -
<input>设flex: 1占满剩余空间，图标容器设固定宽高（如24px） - 避免给
<input>设死宽度，否则响应式时容易溢出或撑不开 - 移动端需加
min-width: 0防止 Flex 子项不收缩（尤其 Safari）
清空按钮（×）怎么触发且不干扰输入焦点
用户点 × 清空内容后，光标应该回到输入框并保持聚焦，否则体验断裂。原生 type="search" 的取消按钮只在 WebKit 有效，且无法自定义样式或行为。
所以实际项目中几乎都手写清空按钮，但容易踩两个坑：点击后输入框失焦、点击区域太小难操作。
- 清空按钮用
<button type="button">，避免触发表单提交 - 绑定
click后立即调用inputEl.value = ''+inputEl.focus() - 按钮设
position: absolute右侧，但外层<div>要设position: relative且overflow: hidden防止圆角裁切 - 用
transform: scale(1.2)或扩大padding提升点击热区，别只靠视觉大小
兼容性与可访问性不能只看 Chrome
图标搜索框在 Firefox 或旧版 Edge 里可能图标偏移、focus outline 错位、语音朗读跳过图标——这不是“样式问题”，是语义缺失。
比如仅用 <svg> 无 aria-hidden="true"，屏幕阅读器会尝试朗读路径数据；又比如没给 <input> 配 aria-label，盲人用户不知道这是搜什么。
-
<svg>必须加aria-hidden="true"，且内部不嵌文本 -
<input>至少有aria-label="站内搜索"，比 placeholder 更可靠 - 用
:focus-visible替代:focus控制 outline，避免鼠标点击时也出现（影响设计） - 测试时禁用 CSS，确认结构仍能线性阅读：图标 → 输入框 → 按钮 → 提交（如有）
图标的“美观”建立在语义正确和交互完整之上，否则再精致的 SVG 也只是个好看摆件。
