chrome/safari等webkit浏览器为默认渲染圆叉清除按钮，由::-webkit-search-cancel-button伪元素实现；隐藏需用input[type="search"]::-webkit-search-cancel-button{display:none}，且仅webkit系需处理。
search输入框的清除按钮为什么默认出现
HTML <input type="search"> 在 Chrome、Safari 等 WebKit/Blink 内核浏览器中会自动渲染一个右对齐的圆叉（×）图标，用于清空输入内容。这不是 JS 添加的，而是浏览器内置的 UI 控件，由伪元素 ::-webkit-search-cancel-button 实现。
用 CSS 隐藏圆叉的正确写法
直接设置 display: none 即可移除该按钮，但必须带上 WebKit 前缀，且需作用于伪元素：
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
常见错误包括：
– 忘记 ::-webkit- 前缀，导致无效
– 写成 ::-webkit-search-decoration（已废弃）
– 在非 WebKit 浏览器（如 Firefox）上尝试隐藏——Firefox 根本不渲染这个按钮，无需处理
要不要彻底禁用 search 类型
如果只是想“去掉圆叉”，没必要换 type；但若发现 type="search" 引发其他问题（比如移动端唤起的键盘多了个“搜索”键、或触发了 Safari 的自动高亮/历史建议），可以考虑改用 type="text" 并手动加 role="search" 保持语义：
-
type="search"会触发浏览器原生搜索行为（如自动记录、下拉历史），清除按钮是其中一环 -
type="text"+role="search"更可控，但需自行实现清空逻辑（如绑定onclick清空value） - 无障碍支持无差异：两者都支持
aria-label和屏幕阅读器识别
清除按钮消失后，用户还能清空吗
隐藏圆叉只是移除了视觉控件，value 仍可通过 JS 修改，键盘 Ctrl+A + Delete 或鼠标拖选删除依然有效。但要注意：
- 没有圆叉时，部分用户（尤其移动端）可能不知道如何快速清空
- 若业务强依赖一键清空，建议额外加一个显式按钮（如
<button type="button">✕</button>），并用 JS 绑定input.value = '' - 不要只靠 CSS 隐藏再 JS 模拟点击圆叉——伪元素无法被 JS 事件捕获
真正麻烦的是跨浏览器一致性：WebKit 隐藏了，Firefox 本来就没有，Edge 现在也跟 WebKit 行为一致。所以只要 CSS 规则生效，就基本搞定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
