必须同时使用-webkit-appearance: none、-moz-appearance: none和appearance: none三者才能彻底归一化input[type="search"]的ua样式，缺一不可。
不能只靠 appearance: none 就完事——漏掉任一前缀或重置项，Firefox 或 Safari 16- 下的圆角、内边距、清空按钮都会出问题。
必须三步卸载原生 appearance 才能真正归一化
浏览器对 input[type="search"] 的 UA 样式干预极强：WebKit 套 searchfield，Firefox 走独立渲染路径。直接写 border 或 padding 很可能被忽略。
-
-webkit-appearance: none：Safari / Chrome 必须有，否则右侧 × 按钮和圆角无法控制 -
-moz-appearance: none：Firefox 必须显式声明，否则border-radius和padding仍异常 -
appearance: none：标准属性，但仅 Safari 16+ 及新版 Firefox 支持；不加前缀时旧版 Safari 完全失效
三者缺一不可，顺序无关，但建议写在一起避免遗漏。
::-webkit-search-cancel-button 的生效边界很窄
这个伪元素只在 Chromium 和 Safari 中对 type="search" 生效，拼错、用错类型、没配 -webkit-appearance: none 都会白写。
- 正确写法：
input[type="search"]::-webkit-search-cancel-button（注意是两个冒号 + 一个短横） - 错误写法：
:::--webkit-search-cancel-button（多冒号）、::-webkit-search-cancel-button（少短横）、input[type="text"]::-webkit-search-cancel-button（类型不匹配） - 仅设
display: none不够——灰底残留；必须配合-webkit-appearance: none才彻底剥离 - 无法用
padding-right或text-align微调位置，它的定位由浏览器固定在最右侧
Firefox 清空功能必须手动补，且要监听 input 事件
Firefox 不渲染 ::-webkit-search-cancel-button，也不提供等效伪类。指望它自动出现 × 按钮是徒劳的。
- 需手动插入一个
<button type="button" class="search-clear"></button>，放在输入框右侧（通常用 flex 容器包裹） - 清除逻辑不能只靠
click：用户按 Backspace 清空到空字符串、粘贴后删光、甚至聚焦后按 Esc，都应触发清空状态标记 - 推荐做法：监听
input事件，用el.value === ''判断是否为空，并同步控制清除按钮的hidden属性或 CSS 类 - 别忘了加
aria-label="清除搜索内容"和键盘可访问支持（Enter/Space触发）
reset 导入时机比写法更重要
即使你把 input[type="search"] 的样式写得再细，如果 normalize.css 或 modern-normalize 加载在你自定义样式之后，所有努力都会被覆盖。
- 确保
normalize.css是 HTML 中第一个<link>，或在 Sass 入口文件main.scss的第一行@import 'base/reset'; - 不要用
@use 'base/reset' as reset——CSS 规则不支持命名空间隔离，无效 - 若已引入 Ant Design 或 Element Plus，检查其是否自带 reset；重复导入会导致
font-size、line-height等被多次覆盖 - 局部重置不用通配符：
.search-wrapper { all: revert; font-family: inherit; color: inherit; }比* { margin: 0; padding: 0 }更安全
真正容易翻车的地方不在怎么写样式，而在是否意识到：浏览器对 search 输入框的“特别关照”是深度耦合在 UA 样式表里的，任何一步跳过前缀、漏掉重置项、或加载顺序错位，都会让表现不一致悄然回归。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
