原生input[type="search"]清除按钮仅webkit/blink浏览器支持，需用::-webkit-search-cancel-button自定义样式并预留padding-right；firefox需js手动实现按钮，点击自动清空并触发input事件。
在 H5 中，input[type="search"] 原生支持清空按钮（clear button），但默认只在部分浏览器（如 Safari、Chrome）中显示，且样式和行为需适配。通过 ::-webkit-search-cancel-button 伪元素可自定义清除按钮，实现更统一、可控的清空体验。
浏览器兼容性与基础用法
该伪元素仅在基于 WebKit/Blink 的浏览器（Chrome、Safari、Edge）中生效；Firefox 不支持，需用 JS + 自定义按钮兜底。使用时无需额外 JS 即可触发清空，但需注意：
- 必须使用
type="search"，type="text"不会触发该伪元素 - 输入框有内容时按钮才显示，聚焦后自动出现
- 点击后自动清空 value，无需监听 click 事件
自定义清除按钮样式
用 CSS 覆盖默认的 × 图标，可调整大小、颜色、位置等：
input[type="search"] {
padding-right: 32px; /* 为按钮留出空间 */
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; /* 移除默认样式 */
height: 16px;
width: 16px;
background: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12"><path d="M7.5 6l4.5-4.5L10.5 0 6 4.5 1.5 0 0 1.5 4.5 6 0 10.5 1.5 12l4.5-4.5 4.5 4.5 1.5-1.5z" fill="%23999"></path></svg>") no-repeat center;
background-size: contain;
cursor: pointer;
}
注意：SVG 中的 # 需 URL 编码为 %23，否则解析失败。
增强交互与降级处理
为提升可用性，建议补充以下逻辑：
- 聚焦时显示清除按钮（部分旧版 Chrome 需加
outline: none防遮挡） - 监听
search事件替代input，避免频繁触发（仅在回车或清空后触发） - Firefox 等不支持伪元素的浏览器，可插入一个绝对定位的
<button type="button"></button>，用 JS 绑定清空逻辑并控制显隐
注意事项与常见问题
实际开发中容易忽略的关键点：
- 清除按钮点击后，
input元素会触发input和change事件，可据此更新 UI 或搜索结果 - 若设置
input[type="search"] { appearance: none; }，可能同时禁用清除按钮，应仅对伪元素设-webkit-appearance: none - 移动端 Safari 中，清除按钮默认偏小，建议至少设为
14px × 14px以上以满足触控最小尺寸
