原生 search 输入框的清除按钮仅 WebKit 内核支持 ::-webkit-search-cancel-button，需满足 type="search"、聚焦且非空、重置 -webkit-appearance 等条件；Firefox 和新版 Safari 无等效伪类，须改用 type="text" + 手动按钮并派发 input 事件。
原生 input[type="search"] 的右侧清除按钮不能用 JS 直接操作，也不能跨浏览器统一定制；它只在 WebKit 内核（Chrome、Edge、Safari 15.4+）中通过 ::-webkit-search-cancel-button 伪元素暴露样式接口，Firefox 完全不支持该伪类——想“定制”，得先接受这个前提。
为什么 ::-webkit-search-cancel-button 常常没反应
这不是你写错了选择器，而是浏览器根本不触发渲染条件：
-
input必须是type="search"，type="text"+inputmode="search"不生效 - 按钮只在输入框获得焦点且
value.length > 0时显示，未聚焦或为空时 CSS 规则不匹配 - 漏写
-webkit-appearance: none，图标会被浏览器默认样式覆盖（尤其 Safari） - 拼错选择器：多一个冒号（
::-webkit-...）、少一个短横（::-webkit-search-cancelbutton）都不匹配 - 未重置
padding-right，自定义图标可能被文字遮挡或挤出可视区
怎么换图标又不破坏交互
替换图标的唯一可靠方式是用 background + SVG data URL，不能用 content 或字体图标：
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.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='%23666'/></svg>");
cursor: pointer;
}
注意两点：
立即学习“前端免费学习笔记（深入）”；
- SVG 中的
#要 URL 编码为%23，否则解析失败 - 必须同步加
padding-right: 32px到input[type="search"]，给图标留出空间，否则文字会盖住它
Firefox 和新版 Safari 怎么办
它们不渲染 ::-webkit-search-cancel-button，也不提供等效标准伪类。所谓“兼容方案”，其实是放弃原生按钮：
- 改用
type="text"，包裹在<div role="search">中保持语义 - 手动添加
<button type="button" aria-label="Clear search">×</button>，用 Flex 布局右对齐 - 监听
input事件控制按钮显隐：button.style.display = input.value ? 'inline-flex' : 'none' - 点击按钮后执行
input.value = ''并触发input.dispatchEvent(new Event('input', { bubbles: true }))，确保 React/Vue 等框架能响应
真正容易被忽略的是：原生清除按钮点击后只清空 value，不触发搜索逻辑；而自定义按钮需要你补上事件派发，否则表单状态和 UI 就脱节了。
