input[type="search"]的清除图标是浏览器原生行为，仅Chrome、Edge、Safari支持，Firefox需伪元素强制启用；须监听input事件而非click，清除后应手动触发input事件并控制focus/blur以适配软键盘。
input[type="search"] 的清除图标是浏览器原生行为
Chrome、Edge、Safari 在 input[type="search"] 中自动渲染 × 清除按钮，无需 JS 或 CSS 模拟。但这个图标只在用户输入非空内容后才显示，且点击后会清空 value 并触发 input 事件——不是 click，这点常被误判。
常见错误：用 document.querySelector('input').addEventListener('click', ...) 监听清除动作，结果无法捕获；正确做法是监听 input 事件并检查 event.target.value === '' 是否由清除引起（需配合 beforeinput 或标记状态判断）。
- 若需兼容
input[type="text"]，必须手动实现清除逻辑，原生图标不会出现 - Firefox 默认不显示该图标，即使设为
search类型；需用::-webkit-search-cancel-button伪元素 +appearance: none强制控制样式（仅 WebKit） - 清除图标位置固定在右侧，无法用
text-align或padding-right精确微调，依赖浏览器渲染逻辑
::-webkit-search-cancel-button 伪元素的兼容性陷阱
这个伪元素只在 Chromium 和 Safari 中生效，且仅对 input[type="search"] 有效。试图给 type="text" 添加它，样式完全不应用。
典型误用：input::--webkit-search-cancel-button { display: none; } 写错双冒号或拼写，导致失效；正确写法是 input::-webkit-search-cancel-button（单冒号是旧规范，已废弃）。
立即学习“前端免费学习笔记（深入）”；
- 隐藏图标：用
input::-webkit-search-cancel-button { -webkit-appearance: none; }，不能只写display: none - 自定义图标：可替换为背景图，但宽高需设为
1em级别，否则易溢出或截断 - 无法通过 JS 获取该伪元素节点，也不能绑定事件——它不是 DOM 节点，只是渲染层装饰
用 JS 手动实现清除图标的通用方案
当需要统一支持所有 input 类型、所有浏览器，或需自定义交互（如清空后聚焦、带确认弹窗），就得手写结构。核心是把 input 包进 <div class="input-wrapper">，再塞一个 <button type="button" class="clear-btn"> 作为触发器。
关键点在于同步状态：按钮是否显示，取决于 input.value.length > 0；点击按钮后，要 input.value = ''，然后显式触发 input.dispatchEvent(new Event('input', { bubbles: true }))，否则 Vue/React 等框架无法响应。
- 按钮需设
type="button"，避免表单意外提交 - 用
aria-label="Clear"和tabindex="-1"（若仅作视觉辅助）或tabindex="0"（若需键盘可操作）提升可访问性 - 监听
input事件来控制按钮显隐，但注意防抖——快速输入可能触发多次，用requestAnimationFrame批量更新更稳妥
清除图标与移动端软键盘的冲突处理
在 iOS Safari 中，input[type="search"] 会唤起带「搜索」键的软键盘，但清除图标点击后，焦点未丢失，软键盘不收起；而手写清除按钮若没主动 blur()，同样卡住键盘。
这不是样式问题，是输入法生命周期管理缺失。真实场景中，用户点 × 后往往希望立即继续操作，软键盘遮挡会打断流程。
- 清除后加
input.blur()可收起键盘，但需注意：若后续还需聚焦（如清空后重新输入），应延时setTimeout(() => input.focus(), 0) - iOS 下
input[type="search"]的原生清除按钮不触发blur()，所以手写方案反而更可控 - 部分安卓输入法在清除后自动 blur，但不可依赖——必须显式控制
