必须分三步卸载原生样式：加-webkit-appearance:none、-moz-appearance:none和appearance:none，再重置outline、border、background、border-radius、padding；::-webkit-search-cancel-button仅webkit有效，需正确拼写且配合-webkit-appearance:none使用；清除动作应监听input事件并结合状态标记判断，firefox无原生清空按钮，需手动实现。
怎么彻底清掉 input[type="search"] 的默认样式
浏览器对 input[type="search"] 有强干预，直接写 border 或 padding 常常无效，因为 WebKit/Safari 会套一层 appearance: searchfield，Firefox 则走另一套渲染逻辑。
必须分三步卸载原生样式：
- 加
-webkit-appearance: none和-moz-appearance: none，再补上标准appearance: none - 显式重置
outline（否则聚焦时可能只剩虚线或完全不可见） - 手动设
border、background、border-radius、padding，不能依赖继承
漏掉 -moz-appearance，Firefox 里圆角和内边距仍可能异常；只写 appearance: none 不加前缀，Safari 16+ 以下版本会失效。
::-webkit-search-cancel-button 能做什么、不能做什么
这个伪元素只在 Chromium 和 Safari 中生效，且仅对 type="search" 生效——给 type="text" 加它，CSS 完全不匹配。
常见误用：
- 拼错选择器：
::--webkit-search-cancel-button（多一个冒号）或::-webkit-search-cancel-button（少一个短横）都不起作用 - 只写
display: none，图标仍可能残留灰底；正确做法是-webkit-appearance: none+display: none - 试图用
text-align或padding-right微调图标位置，实际无效——它的定位由浏览器固定在输入框最右侧
想换图标？只能用 background + SVG base64，不能用 content 插入文字或伪元素内容。
清除动作怎么监听才可靠
点击 × 图标或按 ESC 键，触发的是 input 事件，不是 click，更不是 change。靠 addEventListener('click', ...) 永远捕获不到。
但仅监听 input 并检查 value === '' 也不够——用户手动删光内容也会触发同样条件。
稳妥做法是结合状态标记：
- 在
focus时记录初始值data-prev-value - 在
input事件中对比当前值是否从非空变为空 - 或者监听
beforeinput（注意兼容性：IE/旧 Safari 不支持），捕捉inputType === 'deleteContentBackward'且target.value.length === 0的瞬间
移动端软键盘场景下，还要手动调用 input.focus()，否则清除后焦点可能丢失，导致再次输入需点两次。
Firefox 没清除按钮，怎么办
Firefox 根本不支持 ::-webkit-search-cancel-button，也不渲染原生 × 图标。这不是 bug，是规范未强制要求。
硬要统一体验，只有两个现实选择：
- 放弃
type="search"，改用type="text"+ 手动添加清除按钮（button元素 + JS 绑定click清空 +input事件控制显隐） - 保留
type="search"，但用 JS 检测navigator.userAgent.includes('Firefox')，然后动态插入清除按钮并绑定逻辑
别指望用 ::-moz-search-cancel-button ——它只是历史文档里的占位符，实际从未被 Firefox 实现过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
