必须用包裹且设置非空action才能启用搜索功能；清除按钮需css适配webkit并手动实现跨浏览器支持；移动端需设enterkeyhint="search"、最小高度36px、禁用小字号缩放。
直接用 <input type="search"> 不等于有了可用的搜索入口——它只是语义标记，不自动提交、不保证清除按钮可见、移动端键盘也不一定显示「搜索」键。必须配合 <form></form>、name、CSS 重置和事件控制，才算真正设好。
为什么回车没反应？必须包 <form></form> 且设 action
单独一个 <input type="search"> 按回车不会触发任何行为，浏览器把它当普通文本框处理。
-
<form></form>是提交上下文的必要容器，iOS Safari 和 Chrome 都只在<form action="..."></form>内才识别type="search"并启用「搜索」键盘键 -
action不能为空字符串或"#"；推荐用action="."或真实路径（如action="/search"），部分旧版 iOS 对action="javascript:void(0)"不识别 - 不要只靠
onkeydown监听Enter：中文输入法未上屏时按回车，keydown会先于内容确认触发，导致取到空值 - 正确做法是监听
form的submit事件，再用event.preventDefault()或onsubmit="return false;"控制跳转
清除按钮（×）为啥不显示或点不了？
清除按钮不是始终可见，也不是所有浏览器都原生支持，更不能简单 display: none 一了百了。
- 它只在
input有值且获得焦点时才出现（这是标准行为，不是 bug） - WebKit 浏览器（Chrome/Safari）用
::-webkit-search-cancel-button控制，但该伪元素最小点击热区需 ≥24×24px，display: none会让触控失效 - Firefox 完全不支持该伪元素，写 CSS 无效；若需跨浏览器一致清除体验，得用包裹结构 + JS 手动实现
- 重置建议：
-webkit-appearance: none+ 自定义宽高 + 背景图标（SVG data URL 更可靠），并确保padding-right留足点击空间（≥32px）
移动端键盘还是显示「前往」？检查这三个硬性条件
iOS Safari 对 type="search" 的键盘优化是“有条件信任”，缺一不可。
-
<input>必须在<form></form>内，且<form></form>必须有非空action属性 - 不要设置过小的
height（如24px），iOS 键盘可能遮挡输入框；最小建议36px - 加
enterkeyhint="search"（HTML5 属性），iOS 16.4+ 会强制渲染搜索键，比仅靠type更可靠 - 避免
position: fixed; bottom: 0压着输入框——iOS 不会自动滚动视口，用户看不到输入内容
样式怎么统一？别被 UA 样式暗中覆盖
各浏览器对 type="search" 的默认样式差异极大：Safari 加圆角和内边距，Chrome 塞背景渐变，Firefox 几乎无样式。直接写 border 或 padding 很可能无效。
- 第一步永远是卸载原生样式：
-webkit-appearance: none、-moz-appearance: none、appearance: none - 记得补
outline: none，否则聚焦时视觉反馈丢失；若要保留可访问性焦点环，改用outline: 2px solid #007aff等显式样式 - Firefox 还需处理
input[type="search"]::-moz-focus-inner { border: 0; }，否则聚焦时多出虚线边框 - 移动端注意：iOS 下
font-size 会触发字体缩放，破坏布局，别为省空间乱压字号
最常被忽略的是 Firefox 清除按钮缺失、iOS 字体缩放和表单 action 属性为空这三点——不提前在真机上验证，上线后用户第一眼就卡住。
