最轻量标准做法是设 input 的 type 为 search，浏览器自动显示原生清空按钮；仅此类型触发 Chrome/Edge/Safari15.4+/Firefox110+ 内置逻辑，按钮由 UA 样式注入、不可 JS 选中，聚焦且非空时可见，清空 value 并触发 input/change 事件。
直接把输入框的 type 设为 search，浏览器就会自动在聚焦且有内容时显示 × 清空按钮——这是最轻量、最标准的做法，无需写 JS 或额外样式。
type="search" 是唯一触发原生清空按钮的方式
只有 type="search" 能激活 Chrome、Edge、Safari 15.4+、Firefox 110+ 的内置清除逻辑。其他类型（如 text、url）即使加伪元素或 CSS 修饰，也不会出现这个按钮。
- 按钮由浏览器 UA 样式注入，不在 DOM 中，无法用 JavaScript 选中或监听点击事件
- 点击后自动清空
value，并触发input和change事件，但不会提交表单 - 必须处于聚焦状态 + value 非空，按钮才可见；失焦或为空时自动隐藏
别破坏它的默认行为
很多样式重置操作会直接移除按钮，而不是隐藏它：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
appearance: none或all: unset—— 按钮彻底消失，不可恢复 -
display: none在部分 Android Chrome 版本中会导致聚焦异常 -
input[type="search"]::-webkit-search-cancel-button只对 WebKit 内核有效（Chrome/Safari/Edge），Firefox 不支持，不能用于跨浏览器统一控制
清空后要补上业务逻辑
浏览器只负责清空 value，你的搜索动作还得自己处理：
- 监听
input事件：只要 value 变为空（或非空），就能判断是否刚被 × 点击，再执行搜索、清空结果列表等操作 - 清空后建议调用
input.focus()，尤其在移动端，避免用户还要再点一次才能继续输入 - 注意粘贴、语音输入、拖入文本等场景也会改变 value，所以不能只依赖按钮 click 事件
什么时候该放弃 type=search？
如果你需要：
- 兼容老版本浏览器（如 IE、旧版 Firefox）
- 自定义图标（比如换成 SVG 或带文字的“清空”按钮）
- 精确控制显隐时机（例如不依赖 focus，而是根据 value.length 实时切换）
- 在 input 外部添加按钮并绑定其他功能（如“最近搜索”下拉）
那就得手写按钮：用 <div class="search-wrap">
<input><button type="button"></button>
</div> 结构，配合绝对定位和 input 事件控制显隐与清空逻辑。
