::-webkit-search-cancel-button仅在WebKit内核浏览器生效，Firefox和新版Safari不识别该伪类；统一方案是放弃原生按钮，用JS+自定义按钮实现，确保可访问性和跨浏览器一致性。
为什么::-webkit-search-cancel-button在 Firefox 和新版 Safari 里不生效
这个伪元素是 WebKit 内核（Chrome、Edge、旧版 Safari）私有的，Firefox 从 110 开始支持原生清除按钮，但用的是完全不同的渲染机制，不识别该伪类；Safari 15.4+ 虽然支持原生按钮，但已弃用 ::-webkit-search-cancel-button，改用更受限的 UA 控制逻辑。所以你写 input[type="search"]::-webkit-search-cancel-button { display: none; }，在 Chrome 里能隐藏，在 Firefox 和新 Safari 里根本没效果——不是失效，是压根不匹配。
怎样让清除按钮在所有浏览器里都显示为同一 SVG 图标
别依赖伪元素做跨浏览器统一；直接放弃原生按钮，用 JS + 手动按钮兜底。核心思路是：用 type="search" 保证语义和基础行为，再用一个 <button type="button"></button> 叠加在右侧，通过监听 input 事件控制显隐。
- HTML 结构必须包裹在
<div role="search"> 容器中，<code><input>和<button></button>并列使用 Flex 布局 - 按钮初始
display: none，监听input事件：当input.value.length > 0时button.style.display = "inline-flex" - 按钮点击后执行
input.value = ""，然后手动触发input.dispatchEvent(new Event("input", { bubbles: true }))，确保 React/Vue 等受控组件能响应 - 务必加
aria-label="Clear search"和tabindex="0"，否则屏幕阅读器无法识别，搜索结果页可能被降权 - 必须写
-webkit-appearance: none，否则任何背景、尺寸修改都无效 -
padding-right要给足（比如32px），不然自定义图标会和文字重叠 - 不要用
display: none隐藏伪元素——部分 Chrome 版本会破坏聚焦逻辑，导致输入框失焦异常 - SVG 中的
#必须 URL 编码为%23，否则整个 background 不渲染 - 换图标后记得加
cursor: pointer，否则用户感知不到可点击 - 只监听
search事件做业务逻辑（比如清空筛选条件、重置分页），不要动value - 需要聚焦就直接调
input.focus()，放在search回调末尾即可 - 如果用了手动按钮方案，聚焦要放在
dispatchEvent之后，否则部分浏览器（如 Safari）会在 DOM 更新前就聚焦，导致光标位置错乱
用 CSS 自定义 WebKit 清除按钮时容易踩的坑
如果你仍想保留原生按钮并只针对 Chrome/Edge 做视觉微调，这几个点必须注意：
清除后自动聚焦回输入框却没反应？检查是否干扰了原生流程
原生清除按钮点击后，浏览器会清空 value 并自动隐藏按钮，但不会重新聚焦——这是你要补的。常见错误是：在 search 事件回调里又手动设 input.value = ""，这会导致值被清两次，某些框架（如 Vue 的 v-model）可能跳过响应式更新。
立即学习“前端免费学习笔记（深入）”；
