Chrome和Safari中清除按钮需用::-webkit-search-cancel-button配合-webkit-appearance: none等样式隐藏，仅appearance: none或opacity: 0不兼容；Firefox不支持该伪元素；隐藏后仍可通过快捷键清空，彻底禁用需JavaScript拦截。
Chrome 和 Safari 中清除按钮的默认样式问题
Chrome、Edge（Chromium 内核）和 Safari 默认会在 右侧渲染一个 × 清除按钮，它由伪元素 ::-webkit-search-cancel-button 控制。这个按钮无法通过普通 CSS 选择器选中，也不能用 display: none 直接隐藏——必须显式设置其 appearance 或覆盖所有可样式化属性。
::-webkit-search-cancel-button 的正确隐藏写法
直接设 display: none 在部分旧版 Chrome（如 90 之前）中无效；更可靠的方式是重置外观并清空内容：
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
/* 防止某些版本残留小方块 */
background: transparent;
border: none;
cursor: default;
}
- 必须写
-webkit-appearance: none，仅appearance: none不够兼容 - 加
background: transparent是为了防止某些 Safari 版本残留灰色背景 - 不建议只设
opacity: 0，它仍占布局空间且可能响应点击
Firefox 和 Edge（非 Chromium）不支持该伪元素
::-webkit-search-cancel-button 是 WebKit/Blink 专属，Firefox 完全忽略，新版 Edge（基于 Chromium）支持，但旧版 Edge（EdgeHTML）也不支持。如果你需要跨浏览器统一行为：
- 对 Firefox，清除按钮本就不存在，无需处理
- 若想在所有浏览器都禁用搜索框清空功能，应配合 JavaScript 禁用
input的search类型语义，或改用type="text" - 不要依赖此伪元素做功能判断，它纯属样式层控制
隐藏后用户仍可通过快捷键触发清空
即使视觉上隐藏了清除按钮，用户仍可用 Ctrl+A + Delete 或 Cmd+A + Backspace 清空内容。如果业务逻辑要求彻底禁用清空（比如防误删搜索关键词），需额外监听 input 事件并拦截特定操作：
input.addEventListener('keydown', e => {
if ((e.ctrlKey || e.metaKey) && e.key === 'a') return;
if (e.key === 'Delete' && input.value) {
e.preventDefault();
}
});
伪元素只能管“看起来有没有”，管不了输入行为本身——这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
