type="search"输入框的清除按钮仅Chrome、Edge、Safari原生支持，Firefox不支持，需JS+自定义按钮兜底；可通过::-webkit-search-cancel-button定制WebKit内核样式；其还带来搜索键盘、历史记录及无障碍语义等隐性行为。
search 类型输入框自带清除按钮，但只在部分浏览器生效
HTML 的 type="search" 确实会触发原生清除按钮（× 图标），但行为高度依赖浏览器：Chrome、Edge、Safari 都支持，Firefox 却完全不显示（截至 115 版本仍无原生支持）。这不是 bug，而是规范允许的实现差异 —— HTML 标准只要求语义，不强制 UI 行为。
所以不能只靠 type="search" 就认为“有清除按钮”。实际项目中必须配合 CSS 或 JS 做兜底。
用 ::webkit-search-cancel-button 控制 Chrome/Edge 清除按钮样式
Chrome 和 Edge 使用 WebKit/Blink 内核，可通过伪元素定制清除按钮。Firefox 不识别该伪类，Safari 支持但限制较多（比如无法改图标颜色）。
- 清除按钮默认是灰色 ×，想改成红色：
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M7.414 6l4.586-4.586L10.586.001 6 4.587 1.414.001.001 1.414 4.587 6 .001 10.586l1.413 1.414L6 7.414l4.586 4.586 1.414-1.413z' fill='%23ff6b6b'/></svg>"); width: 16px; height: 16px; } - 隐藏原生按钮（比如要自己用 JS 实现）：
input[type="search"]::-webkit-search-cancel-button { display: none; } - 注意：该伪元素仅对
type="search"生效，type="text"即使加了inputmode="search"也不触发
Firefox 下必须用 JS + 自定义按钮模拟清除功能
Firefox 不渲染 ::-webkit-search-cancel-button，也不提供其他标准伪类。唯一可靠方案是手动添加按钮并绑定逻辑。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构需包裹容器：
<div class="search-wrapper"> <input type="search" id="mySearch"> <button type="button" class="clear-btn"></button> </div>
- JS 监听输入与焦点：
const input = document.getElementById('mySearch'); const btn = document.querySelector('.clear-btn'); input.addEventListener('input', () => { btn.style.display = input.value ? 'block' : 'none'; }); input.addEventListener('focus', () => { if (input.value) btn.style.display = 'block'; }); btn.addEventListener('click', () => { input.value = ''; input.focus(); btn.style.display = 'none'; }); - 关键点：必须监听
input事件（不是change），否则粘贴、语音输入等场景会漏掉；按钮需设type="button"防止表单提交
type="search" 的额外影响：自动聚焦、搜索历史、无障碍支持
除了清除按钮，type="search" 还带来几个隐性行为，容易被忽略：
- 移动端键盘可能显示「搜索」回车键（iOS Safari、Android Chrome 均支持），而
type="text"显示「前往」或「下一步」 - 浏览器会为
type="search"自动保存搜索历史（下拉提示），且该历史独立于普通文本输入框 - 屏幕阅读器会将
type="search"识别为搜索控件（role="searchbox"），比type="text"语义更明确 - 某些 CSS 重置库（如 normalize.css）会对
input[type="search"]设置appearance: textfield，可能覆盖你自定义的圆角或边框
真正麻烦的不是怎么加按钮，而是不同浏览器对同一属性的解释差异太大 —— 一个 type="search" 在 Chrome 里是带 × 的搜索框，在 Firefox 里只是个没特殊表现的普通输入框，还得自己补 JS。别指望一次写完就全平台一致。
