type="search"是实现清除图标的最简方案，仅chrome、edge、safari（15.4+）原生支持；firefox不支持，旧版safari需appearance: searchfield；自定义需包裹容器、手动控制显隐、触发事件并处理聚焦与框架同步。

input显示清除图标需要浏览器原生支持

只有 Chrome、Edge、Safari（15.4+）等基于 Blink/WebKit 的浏览器才支持 type="search" 自带的清除按钮，type="text" 默认不显示。强行用其他 type（比如 type="search"）但语义不符，可能影响可访问性或表单提交行为。

用 type="search" 是最简方案

如果场景允许（比如搜索框），直接用 type="search" 即可，无需额外 JS 或 CSS：

<input type="search" placeholder="搜索...">

注意：Firefox 不渲染该图标，且部分旧版 Safari 需要加 appearance: searchfield 才生效；iOS Safari 在某些版本中会隐藏图标，除非用户开始输入。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

自定义清除图标需手动控制显隐逻辑

想在 type="text" 上实现，必须自己画图标 + 绑定事件 + 控制清空行为。关键点：

• 用包裹容器（如 <div class="input-with-clear">）容纳 <code><input> 和清除 <button></button>
• 清除按钮需设 display: none，仅当 input.value.length > 0 时显示
• 点击按钮要调用 input.value = '' 并触发 input 和 change 事件（否则 Vue/React 可能不响应）
• 按钮必须设 type="button"，否则在表单内点击会触发表单提交

清除图标样式和交互细节容易出错

常见翻车点：

• 图标用 background-image 时未设置 background-size: contain，导致模糊或拉伸
• 清除按钮用 position: absolute 但父容器没设 position: relative，图标飘走
• 没阻止按钮默认聚焦（outline: none 或 focus-visible 处理缺失），影响键盘用户操作
• 移动端点击区域太小，没加 min-width/min-height 或 padding，导致点不中

真正麻烦的不是画图标，而是让清空动作与框架（如 React 的受控组件）同步，以及保持 focus 状态不丢失——这点常被忽略，一删就光标跑没了。