需用 appearance: none 卸载原生样式，重置 border/padding/outline，并针对 WebKit 用 ::-webkit-search-cancel-button 清除按钮；Firefox 不支持该伪元素，应改用包裹结构+JS 实现；移动端建议 type="text" + inputmode="search" 避坑。
怎么改 <input type="search"> 的默认样式
浏览器对 search 输入框加了一堆隐藏规则，比如 safari 默认带「×」清除按钮、chrome 有圆角和阴影、edge 可能塞进搜索图标——直接写 border 或 background 经常没反应，是因为伪元素和用户代理样式在背后拦着。
关键不是“能不能改”，而是得先清掉浏览器的默认干预：
- 用
appearance: none卸载原生控件（注意加-webkit-appearance和-moz-appearance前缀） - 手动重置
outline、border、padding，不然会和系统样式打架 - 清除按钮是伪元素，Safari/Chrome 用
::-webkit-search-cancel-button，Firefox 不支持这个，得靠 JS 模拟或换方案
示例最小可行样式：
input[type="search"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #ccc;
padding: 8px 12px;
outline: none;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
background-size: contain;
}
为什么 ::-webkit-search-cancel-button 在 Firefox 里不生效
因为它是 WebKit 专属伪元素，Firefox 根本不识别。这不是 bug，是标准没统一——W3C 规范里压根没定义这个伪类，纯属 Chrome/Safari 的私有扩展。
如果你需要跨浏览器一致的清除按钮，得放弃依赖它：
立即学习“前端免费学习笔记（深入）”；
- 用
<div>包裹<input>，自己放一个<button>，监听input事件控制显隐 - 清除逻辑别只靠
value = ""，记得触发input和change事件，否则 Vue/React 双向绑定可能不同步 - 如果项目已用 Tailwind 或 Bootstrap，优先查它们是否封装了 search 组件——自己手写反而容易漏焦点管理或键盘支持（比如按 Esc 清空）
search 输入框的 results 和 incremental 属性还值得用吗
基本不用。这两个属性从 2010 年代就存在，但实际支持极差：results 本意是显示下拉历史，但只有旧版 Safari 部分支持；incremental 要求配合 JavaScript 监听 input 事件做实时搜索，可现代框架（React/Vue）早有更可控的防抖方案。
真要实现搜索建议，现实路径是：
- 用普通
<input type="text">，避免被search的语义干扰渲染 - 自己控制
<datalist>或浮层<ul>，兼容性更好、样式更自由 - 别依赖
autocomplete="off"来禁用浏览器自动填充——它对 search 类型经常失效，直接用autocomplete="search"或随机字符串更可靠
移动端软键盘弹出时，search 输入框为什么会被顶出视口
这是 iOS Safari 的经典问题：当 <input type="search"> 获焦，软键盘升起，页面缩放或滚动错乱，尤其在 fixed 定位的搜索框上特别明显。
根本原因是 Safari 对 search 类型做了特殊处理，会尝试把输入框“提”到键盘上方，但计算逻辑有缺陷。解法很务实：
- 改用
<input type="text">，并设置inputmode="search"，既保持语义又绕过 Safari 的特殊逻辑 - 监听
focusin事件，在 iOS 上手动scrollIntoView({ block: 'nearest' })，别用smooth（Safari 不支持） - 避免给搜索框父容器设
transform或perspective，这会让 Safari 的滚动定位彻底失灵
最省事的底线方案：所有移动端搜索交互，一律用 type="text" + inputmode="search"，别贪 search 那点语义糖——它带来的麻烦远多于收益。
