appearance: none 不一定管用，因需同时声明 -webkit-appearance: none、-moz-appearance: none 和 appearance: none 才能跨浏览器生效，漏掉任一前缀会导致 Safari 或 Firefox 中样式残留。
为什么 appearance: none 不一定管用
直接写 appearance: none 很可能只在部分浏览器生效，尤其 Safari 16 以下或旧版 Android WebView 中会失效。真正要卸载原生样式，必须三者齐备：-webkit-appearance: none、-moz-appearance: none、appearance: none。漏掉任一前缀，Firefox 里圆角/内边距仍异常，Safari 里按钮可能残留灰底或尺寸错乱。
如何安全隐藏清除按钮而不丢功能
别用 display: none 处理 ::-webkit-search-cancel-button —— 它会连点击清空逻辑一起干掉，不是“隐藏”，是“移除”。正确做法是：
-
opacity: 0+pointer-events: none（视觉隐藏，但事件通道保留） - 或更稳妥地：用
background: transparent配合固定width/height（如16px），避免某些安卓 WebView 塌缩 - 若需彻底禁用清除行为，就别依赖原生按钮，改用自定义按钮 +
input事件监听
移动端 iOS 的两个隐藏陷阱
iOS Safari 的清除按钮分两层，很多人只顾输入框里的 ×，却忘了顶部地址栏下方的“搜索建议栏”也有一个系统级 × 按钮，那个完全不受你的 CSS 控制。另外，如果页面 viewport 缺少 user-scalable=no，双指缩放可能导致你定位好的自定义清除按钮偏移——这不是 bug，是 Safari 对 absolute 定位元素在缩放时的重绘策略。
要不要自己画一个清除按钮
当设计要求严格对齐、带动效、或需统一处理 Firefox/旧安卓浏览器时，手动加一个 更可控。关键点：
- 用
position: absolute+right: 8px+top: 50%+transform: translateY(-50%)居中对齐 - 点击热区至少
44px × 44px，靠padding扩展，别调font-size或width/height - 显示逻辑用
:not(:placeholder-shown)或:valid（后者需required），比监听 JS 事件更轻量
原生清除按钮看着省事，但跨端一致性差；自定义按钮多几行 HTML/CSS，换来的是可预测的交互和样式控制——这点在混合 WebView 场景里尤其明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
