原生清空按钮仅在<input type="search">且满足有值、聚焦、未被CSS隐藏时显示，Chrome/Safari支持但Firefox不支持；需用JS监听input事件控制自定义按钮显隐，并统一禁用原生按钮以保证跨浏览器一致性。
input[type="search"] 的清空按钮为什么没出现
浏览器原生支持的搜索框清空按钮，只在 input 的 type 明确设为 "search" 时才可能触发，且仅当输入框有值、获得焦点、且未被 CSS 强制隐藏时才会显示。不是所有浏览器都默认启用——比如 Firefox 默认不显示，Chrome 和 Safari 则会。
常见错误是把 type 写成 "text" 或漏掉 type 属性（此时按规范 fallback 为 "text"），导致清空按钮完全不渲染。另外，appearance: none 或 ::-webkit-search-cancel-button { display: none } 这类样式也会直接干掉它。
- 务必写
<input type="search">，别用type="text"+ 自己画叉 - Chrome/Safari 下可用
input[type="search"]::-webkit-search-cancel-button微调样式，但别设display: none - Firefox 不支持该伪元素，也不显示原生按钮；如需统一行为，得用 JS + 自定义按钮
用 JavaScript 控制清空按钮显隐的边界条件
原生按钮的显示逻辑由浏览器控制，无法通过 JS 直接 show() / hide()。但你可以用 JS 模拟“只在有值时显示”的交互效果——前提是放弃原生按钮，改用自定义图标 + 事件绑定。
关键点在于监听 input 事件（不是 change），并结合 value.length 和 focus 状态判断是否显示清空控件：
立即学习“前端免费学习笔记（深入）”；
const searchInput = document.querySelector('input.search');
const clearBtn = document.querySelector('.search-clear');
searchInput.addEventListener('input', () => {
clearBtn.style.display = searchInput.value ? 'inline-block' : 'none';
});
searchInput.addEventListener('focus', () => {
if (searchInput.value) clearBtn.style.display = 'inline-block';
});
searchInput.addEventListener('blur', () => {
// 可选：失焦后隐藏，避免残留
setTimeout(() => {
if (!searchInput.matches(':focus')) {
clearBtn.style.display = 'none';
}
}, 0);
});
-
input事件比keyup更可靠，能捕获粘贴、拖入、IME 输入等场景 - 不要只依赖
focus显示按钮——用户可能先聚焦再输入，此时按钮应等有值才出现 - 注意
blur后的延迟隐藏：否则点击清空按钮本身会触发blur，导致按钮闪一下就消失
兼容性兜底：Firefox 和旧版 Edge 的处理策略
Firefox 完全不实现 input[type="search"] 的原生清空按钮，旧版 Edge（EdgeHTML）行为也不一致。如果你需要跨浏览器统一 UI，必须放弃依赖原生机制。
推荐做法是：始终使用 type="search"（语义正确、无障碍友好），同时默认隐藏原生按钮（用 CSS 覆盖），再插入一个带 aria-label="清除搜索词" 的自定义按钮，并绑定 click 清空 + input 显隐逻辑。
- 加
input.search::-webkit-search-cancel-button { appearance: none; }统一禁用原生按钮 - 自定义按钮用
position: absolute叠在 input 右侧，注意z-index和点击穿透问题 - 清空时记得
searchInput.value = ''后手动触发input事件，确保其他监听者（如 Vue/React 绑定）同步
移动端 Safari 的额外注意点
iOS Safari 在 input[type="search"] 上会额外显示「取消」文字按钮（右上角），和原生清空按钮共存。这个「取消」按钮无法用 CSS 隐藏，也无法通过 JS 移除，但它只在软键盘弹出时出现，不影响 DOM 结构。
如果你的自定义清空按钮位置和它重叠，用户可能误点「取消」而关闭键盘却不清空内容——这时候要靠布局避让：比如把自定义按钮放在 input 内部右侧 padding 区，而非绝对定位到最右边缘。
- 测试真机，别只信模拟器；iOS 16+ 对
search类型的渲染有微调 - 「取消」按钮不触发
input或change，只触发blur，所以清空逻辑不能只绑在它的点击上 - 如果业务允许，可考虑用
type="text"+inputmode="search"替代，避免 Safari 多余按钮，但会丢失语义和部分平台优化
input 事件和 value 状态上，比纠结浏览器差异更省事。 
