Chrome/Edge中::search-cancel-button失效的主因是：必须使用<input type="search">且value非空；仅Blink内核支持，Firefox/Safari不识别；样式受限于appearance等少数属性，建议JS+自定义按钮实现兼容方案。
Chrome/Edge中::search-cancel-button伪元素失效的常见原因
直接写 ::search-cancel-button 没反应？大概率是因为没满足两个硬性前提：输入框必须是 <input type="search">，且该元素必须有实际输入内容（即 value 非空）。空值状态下伪元素不渲染，CSS自然不生效。
另外，这个伪元素只在基于 Blink 的浏览器（Chrome、Edge、Opera）中支持，Firefox 和 Safari 完全无视，别白费劲。
- 检查 HTML 是否用了
type="search"，而不是type="text" - 确保当前
input的value属性非空（哪怕只有一个空格） - 避免用
display: none或visibility: hidden隐藏整个 input，会连带取消按钮一起“消失”
::search-cancel-button 的样式限制与绕过方式
这个伪元素能控制的样式非常有限：appearance、background、border、border-radius、width、height、margin、padding、opacity、cursor 是安全的；但 font、color、transform、filter 大概率被忽略——Blink 引擎对它的渲染层做了强约束。
想实现图标替换或更精细交互？别硬刚伪元素。推荐用 JS + 自定义按钮组合：
立即学习“前端免费学习笔记（深入）”；
- 给
input加position: relative - 在外部包裹一层
div，绝对定位放一个自定义<button type="button"> - 监听
input的input事件，根据value.length控制按钮显隐 - 点击按钮时调用
input.value = ""并触发input事件
兼容性兜底：如何让非 Blink 浏览器也有清除功能
Firefox 和 Safari 不认 ::search-cancel-button，但它们都支持 input[type="search"] 的原生清除逻辑（只是不暴露可样式化的按钮）。所以关键不是“怎么改样式”，而是“怎么让清除行为一致”。
建议统一用 JS 实现清除逻辑，再通过 CSS 控制视觉表现：
- 所有浏览器都监听
input事件，用input.hasAttribute("value")或input.value !== ""判断是否显示清除控件 - 清除按钮的 DOM 结构保持一致（比如固定 class 名
search-clear），CSS 全局生效 - 对 Blink 浏览器可额外加
::search-cancel-button { display: none; }防止双按钮
性能与可访问性提醒
自定义清除按钮不是加个 click 事件就完事。用户可能用键盘操作（Tab 进入、Enter 触发），屏幕阅读器也需要识别其功能。
- 按钮必须带
aria-label="清除搜索内容"，不能只靠 icon - 用
type="button"避免表单意外提交 - 清除后应将焦点返回到
input，方便连续操作：input.focus() - 避免在每次
input事件里反复创建/销毁 DOM 节点，复用已有元素更稳妥
伪元素看着省事，但真要兼顾样式、行为、无障碍，还是得亲手控制按钮生命周期。Blink 的 ::search-cancel-button 只是个半成品接口，别把它当标准解法。
