直接写display: none会破坏触控热区（需≥24×24px）、导致屏幕阅读器不可感知、手指点击失效，且部分安卓webview忽略清空逻辑；正确做法是先用-webkit-appearance: none剥离原生样式，再手动设置尺寸与margin-right或外层padding-right预留点击空间。
为什么直接 display: none 会出问题
直接写 input[type="search"]::-webkit-search-cancel-button { display: none; } 看似简单，但实际会破坏触控体验和无障碍支持。Chrome 和 Safari 对清除按钮有最小热区要求（≥24×24px），display: none 不仅让屏幕阅读器无法感知该功能，还会导致手指点击失效——尤其在 iOS 键盘弹出后，用户根本点不中那个“看不见的区域”。更麻烦的是，部分安卓 WebView 会因此忽略整个清空交互逻辑。
::-webkit-search-cancel-button 的正确重置方式
必须用 -webkit-appearance: none 先剥离原生样式，再手动控制尺寸和视觉。只设 width/height 不够，还要配 margin-right 或外层 padding-right 留出点击空间：
-
input[type="search"]::-webkit-search-cancel-button必须带双冒号，单冒号（:webkit-search-cancel-button）已废弃 - Firefox 完全不识别这个伪元素，所以它对 Firefox 无效——别指望靠它统一控制所有浏览器
- 如果同时用了
inputmode="search"，旧版 Safari 可能额外渲染搜索装饰图标，需加input[type="search"]::-webkit-search-decoration { display: none; } - 不要给伪元素设
cursor: pointer，浏览器已内置反馈，加了反而可能覆盖原生点击态
自定义 SVG 图标时的编码与尺寸陷阱
用 background-image: url("data:image/svg+xml;utf8,...") 替换 × 图标时，URL 中的 # 必须写成 %23，否则解析失败；SVG 宽高建议设为 16px 级别，太大容易溢出，太小则触控不友好：
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12"><path d="M7.414 6l4.586-4.586L10.586 0 6 4.586 1.414 0 0 1.414 4.586 6 0 10.586l1.414 1.414L6 7.414l4.586 4.586 1.414-1.414z" fill="%23999"></path></svg>");
background-size: contain;
margin-right: 8px;
}
注意：这个 SVG 是内联 data URL，不能省略 xmlns 和 viewBox，否则某些 Safari 版本会渲染为空白。
Firefox 缺失清除按钮怎么办
Firefox 默认不渲染 ::-moz-search-cancel-button，即使写了也基本无效。真要兼容，就得放弃伪元素方案，改用手动实现：
- 用
type="text"起手，避免 Firefox 对search类型的不可控行为 - 外层包
<div class="search-wrapper">，内部放 <code><input>+<button type="button" class="clear-btn"></button> - 按钮显隐逻辑：监听
input事件，当this.value.length > 0时显示，否则隐藏 - 点击清空后必须手动触发
input.dispatchEvent(new Event('input', { bubbles: true }))，否则 Vue/React 等框架收不到变化
原生清除按钮不是万能钥匙，它只在 WebKit 内核下可控；跨浏览器一致体验，终究得靠 JS + 结构补位——这点最容易被忽略，直到测试阶段才发现 Firefox 用户根本没法一键清空。
