type="search"是唯一触发浏览器原生清除按钮的类型，Chrome、Edge、Safari 15.4+、Firefox 110+均支持，但仅在聚焦且有值时显示；点击清空value并触发input/change事件，需手动监听实现搜索逻辑。
type="search" 是唯一能触发浏览器原生清空按钮的类型，其他方式都要靠 JS + 自定义按钮配合 CSS 定位实现。别试 type="text" 加伪元素，它不生效。
为什么 type="search" 能直接出 × 按钮
Chrome、Edge、Safari 15.4+、Firefox 110+ 都支持这个行为，但前提是：input 必须是 type="search"，且聚焦时有值才会显示按钮。
- 按钮由浏览器 UA 样式自动注入，不在 DOM 中暴露节点，所以你无法用
document.querySelector拿到它 - 点击后只清空
value，不触发submit，也不调你的搜索逻辑——得自己监听input事件补上 -
appearance: none或all: unset会直接干掉这个按钮，不是隐藏，是移除 - 移动端 iOS Safari 默认显示，Android Chrome 可能需确保未禁用
-webkit-appearance
input[type="search"]::-webkit-search-cancel-button 能做什么
这个伪元素只在 WebKit 内核（Chrome/Edge/Safari）生效，Firefox 不认，别指望它跨浏览器统一控制。
- 可以改尺寸、换图标（用
background）、调透明度，但不能绑定事件或修改逻辑 - 别用
display: none，部分版本会导致聚焦异常；用appearance: none更稳妥 - 想换 SVG 图标？得同步加
padding-right避免文字被遮挡 - 它不响应
click，所以监听不到“用户点了 ×”，只能靠input事件感知清空动作
手动加按钮：DOM 结构和显隐逻辑怎么写才稳
要兼容老浏览器、精确控制样式、或绕过 UA 行为限制，就得手写按钮。关键在结构、定位、显隐时机三件事。
- HTML 必须是
input和button同级、button紧跟input后，比如：<div class="search-wrap"><input id="q"><button type="button" id="clear"></button></div> - CSS 用
position: absolute定位按钮，父容器加position: relative，input加padding-right预留空间 - 显隐别靠
focus/blur——移动端软键盘收起时blur常延迟或丢失；改用input事件监听value.length，再切opacity或visibility - 按钮
type必须是"button"，放form里却没设类型，点一下可能意外触发表单提交
清空后焦点和事件怎么处理才不翻车
清空只是第一步，后续交互断链才是常见坑点。
立即学习“前端免费学习笔记（深入）”；
- 清空后立刻
input.focus()，否则用户还得再点一次——尤其移动端，软键盘不会自动弹起 - 别只监听按钮
click，还要监听input事件，因为粘贴、拖入、语音输入等也会让值变空，这时按钮该隐藏，但没人点它 - 如果搜索逻辑依赖
input值变化（比如实时过滤），必须监听input，而不是等按钮点击后再查value - 表单提交后想清空？别在
submit里直接reset()，得用setTimeout(() => form.reset(), 0)，否则可能被提交过程打断
