默认清除图标需用appearance: none隐藏::-webkit-search-cancel-button和::-webkit-search-decoration伪元素，因其是原生控件而非CSS绘制，display: none在旧Safari中易致聚焦异常。
input[type="search"] 默认清除图标怎么关
Chrome、Safari 等浏览器给 input[type="search"] 自带一个 × 清除按钮，即使值为空也会渲染占位（尤其在聚焦时）。这不是 CSS 伪元素画的，而是原生控件，所以不能靠 ::after 覆盖——得用伪元素隐藏它。
- 只对
input[type="search"]有效，input[type="text"]不会出现这个图标 - 清除图标由浏览器控制，
value为空时仍可能显示（尤其 Safari 16+ 和 Chrome 110+ 的行为不一致） - 必须同时隐藏两个伪元素：
::-webkit-search-cancel-button和::-webkit-search-decoration
input[type="search"] {
&::-webkit-search-cancel-button {
appearance: none;
}
&::-webkit-search-decoration {
appearance: none;
}
}
为什么 appearance: none 比 display: none 更可靠
display: none 在某些旧版 Safari 中会导致输入框聚焦异常或光标错位；而 appearance: none 是专门用于“剥离原生控件样式”的标准方式，它让浏览器放弃绘制该子控件，但保留其逻辑位置和事件响应能力。
-
appearance: none兼容 Chrome 4+、Safari 5.1+、Edge 12+ - 不用加前缀（现代浏览器已支持无前缀
appearance），但为了兼容老版本，仍建议保留-webkit- - 不要写成
appearance: hidden或visibility: hidden—— 这些值无效
清空后还残留图标的常见原因
即使写了 appearance: none，图标仍出现，大概率是以下情况之一：
- CSS 选择器权重不够，被其他规则覆盖（比如用了
!important的第三方 UI 库样式） - 把样式写在了
input的父容器上，没命中input[type="search"]本身 - 用了
type="text"却误以为会触发清除图标（它不会，除非 JS 手动加） - 某些 Electron 或 WebView 环境中，需要额外设置
webPreferences: { disableBlinkFeatures: 'SearchInput' }
如果想保留清除功能但只在有值时显示
纯 CSS 做不到“按 value 动态显隐”，因为伪元素无法读取 DOM 属性。必须配合 JS 监听 input 事件来切 class：
立即学习“前端免费学习笔记（深入）”；
<input type="search" id="mySearch">
<style>
#mySearch.has-value::-webkit-search-cancel-button {
appearance: none;
}
</style>
<script>
const el = document.getElementById('mySearch');
el.addEventListener('input', () => {
el.classList.toggle('has-value', el.value.length > 0);
});
</script>
注意：这里不是“显示图标”，而是“取消隐藏”——默认已用 appearance: none 隐藏了，有值时才移除该限制。真正的显隐控制权仍在浏览器手里，JS 只是辅助切换状态。
最麻烦的地方其实是 Safari 对 input[type="search"] 的渲染策略：它有时会在空值 + 聚焦状态下强行唤出图标，哪怕 CSS 已禁用。这种情况下，换用 type="text" + 自定义清空按钮反而是更可控的选择。
