仅靠 display: none 无法彻底隐藏 search 输入框清除按钮，必须分引擎处理：webkit 需 -webkit-appearance: none + ::-webkit-search-cancel-button 隐藏，ie/edge 需 ::-ms-clear + color: transparent，firefox 无需处理。
直接说结论：仅靠 display: none 无法在所有浏览器中彻底隐藏 input[type="search"] 的清除按钮，必须分引擎处理，且 WebKit 和 IE/Edge 的伪元素不互通。
为什么 input::-webkit-search-cancel-button { display: none; } 有时无效
常见错误现象是 Chrome/Safari 中按钮仍可见，或隐藏后输入框右侧留白。这是因为：
-
-webkit-appearance: none必须加在input[type="search"]本身上，否则伪元素样式可能被默认渲染逻辑覆盖 - 部分旧版 Safari（如 iOS 14.5）对
::-webkit-search-cancel-button的继承行为异常，需显式设width/height为0 - 若同时用了
background-image或mask，即使display: none也可能因层叠顺序导致视觉残留
input::-ms-clear 是 IE/Edge 唯一有效入口
IE10+ 和旧 Edge（EdgeHTML）根本不认 ::-webkit- 系列伪元素，它们用的是 ::-ms-clear。这个伪元素：
- 只在用户输入内容后才渲染，空值时不存在，所以不能依赖它做布局占位
- 必须配合
color: transparent或background: none，单写display: none在某些 IE11 版本下会失效 - 不能设置
transform或animation，动效需退回到 JS 控制显隐
典型写法：
input[type="search"]::-ms-clear { color: transparent; width: 0; height: 0; }
统一隐藏的最小可行 CSS 组合
要覆盖 Chrome、Safari、EdgeHTML、IE10+，这四行是底线：
-
input[type="search"] { -webkit-appearance: textfield; }—— 重置 WebKit 默认 search 样式，避免边框/圆角干扰 -
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }—— 显式禁用 WebKit 清除按钮 -
input[type="search"]::-webkit-search-decoration { display: none; }—— 隐藏 WebKit 的搜索装饰（如放大镜图标） -
input[type="search"]::-ms-clear { display: none; }—— 覆盖 IE/Edge
注意：Firefox 完全不支持 type="search" 的原生清除按钮，所以无需任何处理。
真正想自定义按钮时，别硬改伪元素
当设计要求按钮位置精确、带 hover 动效、或与右侧图标对齐时，伪元素方案会暴露本质缺陷：
- WebKit 伪元素无法用
position: absolute相对于父容器定位，只能靠right偏移，但不同浏览器计算基准不一致 - IE/Edge 的
::-ms-clear不响应pointer-events，点击区域不可控 - 移动端 Safari 15.4+ 对
filter渲染有 bug，hue-rotate()会导致按钮闪烁甚至消失
更可靠的做法是：放弃 type="search"，改用 type="text" + 手动插入 <button type="button" class="search-clear"></button>，再用 JS 绑定 input 事件控制显隐和清空逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
