现代浏览器原生支持 type="search" 的清除按钮，但仅限该类型且需聚焦有值时显示；CSS 仅能通过 ::-webkit-search-cancel-button 定制 WebKit 内核样式，Firefox 和新版 Safari 不支持；清除后仅触发 input/change 事件，需手动监听实现搜索逻辑；兼容性差时推荐 JS 模拟方案。
search 类型的 input 本身不带清除按钮，但浏览器会自动添加
现代浏览器（Chrome、Edge、Safari 15.4+、Firefox 110+）对 type="search" 的 input 元素原生支持清除按钮，无需 JavaScript 就能显示 × 图标并清空内容。但这个行为不是 CSS 或属性控制的，而是 UA 样式（User Agent）内置逻辑——所以它只在 type="search" 时触发，type="text" 即使加了 clear 属性也不会出现。
常见误区是以为加个 placeholder 或 required 就能唤出清除按钮，其实不行；也有人试图用 input[type="search"]::-webkit-search-cancel-button 强制隐藏，结果发现 Safari 不认这个伪元素——这是 Chrome/Edge 特有的。
- 必须用
type="search"，不能用type="text" - 清除按钮默认只在输入框有值且获得焦点时显示
- 点击 × 后，
input的value被设为空字符串，同时触发input和change事件 - Firefox 在 110 之前完全不显示该按钮，升级后才支持
如何用 CSS 控制清除按钮的样式和可见性
WebKit 内核（Chrome、Edge、旧版 Safari）提供 ::-webkit-search-cancel-button 伪元素，可用于定制 × 图标，但仅限视觉调整：隐藏、换图标、改尺寸。不能绑定点击事件，也不能改变其逻辑行为。
Firefox 和新版 Safari 使用不同机制，不支持该伪元素，所以依赖它做“统一隐藏”会失效；若想全平台隐藏，只能用 JS 拦截聚焦/输入后手动控制，但违背原生意图，不推荐。
立即学习“前端免费学习笔记（深入）”；
- 隐藏 WebKit 清除按钮：
input[type="search"]::-webkit-search-cancel-button { appearance: none; } - 替换成自定义 SVG 图标（需配合
background和padding-right避免文字重叠） - 不要用
display: none直接隐藏伪元素，部分版本会破坏聚焦逻辑 - 修改
cursor: pointer可提升点击反馈，但不影响功能
清除按钮点击后不会自动触发搜索，需监听 input 事件补全逻辑
原生清除按钮只负责清空 value，不调用表单提交、不触发 submit、也不执行你的搜索函数。如果你的搜索依赖 input 值变化（比如实时过滤），必须监听 input 事件，而非只靠按钮点击。
典型错误是监听 click 到清除按钮上——你根本拿不到那个按钮的 DOM 引用，它是 UA 渲染的，不在 Shadow DOM 外暴露节点。
- 正确做法：
input.addEventListener('input', () => { if (!input.value) doClearAction(); else doSearch(); }) - 避免重复响应：清除后
input事件会触发一次空值，别把它当成“用户主动搜索空内容” - 移动端软键盘的“搜索”键（而非回车）仍会触发表单提交，和清除按钮无关
兼容性差的场景下，用 JS + 自定义按钮模拟更可控
当目标环境包含大量旧版 Firefox、Android WebView 或微信内置浏览器（X5 内核），type="search" 的清除按钮基本不可用。此时不如放弃原生，用 type="text" + 右侧绝对定位的 button，手动管理显隐和清空逻辑。
这种方案牺牲一点语义化，换来确定性：你能控制按钮位置、图标、禁用状态、键盘交互（如 Enter 后自动聚焦到清除按钮），还能加 ARIA 属性提升可访问性。
- 按钮需设
type="button"，防止意外提交表单 - 用
aria-label="清除搜索词"和tabindex="0"支持键盘操作 - 监听
input事件控制按钮显隐：button.toggleAttribute('hidden', !input.value) - 清空后记得
input.focus()，否则光标会丢失
