使用 type="search" 可触发浏览器原生清除按钮，仅此类型被所有现代浏览器默认支持；需避免 appearance: none 隐藏按钮，且确保输入框可编辑、未被遮挡、初始化即设对类型。
如何用 type="search" 触发浏览器原生清除按钮
现代浏览器（Chrome、Edge、Safari、Firefox）对 <input type="search"> 会自动渲染一个可点击的 × 清除按钮，无需 JS 或额外样式。这是最轻量、兼容性最好、语义最准确的方式。
关键点：type="search" 是唯一被所有主流浏览器默认支持清除按钮的 input 类型；type="text" 或其他类型不会触发该行为，哪怕加了 autocomplete="off" 也没用。
- 必须使用
type="search"，不能靠 CSS 模拟或 JS 插入按钮来“假装”有清除功能 - 清除按钮只在输入框有值且获得焦点时显示（部分旧版 Safari 需要手动聚焦后才出现）
- 用户点击 × 后，
input.value立即清空，同时触发input和change事件 - 移动端 iOS Safari 中该按钮默认可见，但 Android Chrome 可能需确保未禁用
appearance样式（见下节）
为什么 appearance: none 会干掉清除按钮
很多开发者为了统一输入框样式，习惯性给 input 加 appearance: none 或 -webkit-appearance: none。但这个声明在 Chrome/Edge/Safari 中会直接隐藏原生清除按钮——它不是“覆盖”，而是“移除”。
解决办法不是放弃样式控制，而是精准重置：
- 保留
appearance: none，但单独为清除按钮恢复样式：input[type="search"]::-webkit-search-cancel-button {<br> -webkit-appearance: searchfield-cancel-button;<br>} - Firefox 不支持伪元素控制清除按钮，所以
type="search"在 Firefox 中始终可用，无需额外处理 - 如果用了 CSS 自定义滚动条、焦点轮廓等，注意不要用
all: unset全局重置，它会连清除按钮一并抹掉
search 类型的兼容性与语义代价
type="search" 虽然带来清除按钮，但也带来两个实际影响：一是部分浏览器（如旧版 IE）不识别，会退化为 type="text"（无清除按钮）；二是它会改变表单提交行为——某些老框架或后端解析可能依赖 type="text" 的字段名约定。
- IE10+ 支持
type="search"，但不渲染清除按钮；IE9 及更早版本完全忽略该类型 - 若需支持 IE9–10，且必须有清除功能，则无法依赖原生，得回退到 JS + 按钮方案（不属于本文范围）
- 语义上，
type="search"建议用于真正搜索场景（如站内搜索框），而非普通表单字段；滥用可能导致辅助技术误读 - 移动端键盘：iOS 和 Android 对
type="search"会显示“搜索”软键盘确认键，比type="text"的“完成”更贴切
清除按钮不可点击？检查这三点
即使写了 type="search"，按钮仍不出现或无法点击，大概率是以下原因：
- 输入框被设为
disabled或readonly—— 清除按钮只在可编辑、可聚焦状态下激活 - CSS 中设置了
pointer-events: none或父容器遮挡（比如z-index层级问题） - JS 动态修改了
input.type（例如从"text"改成"search"），但浏览器未重新渲染伪元素；应避免运行时改type，初始化就写对
清除按钮是浏览器原生能力，不是“装饰”，它的存在与否取决于类型、状态和样式规则的组合。别把它当成可选 UI 元素去“添加”，而要把它当作 type="search" 的固有行为去“保障”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
