Search · 搜索框

来源：参考组件库（3 个 variant：基本 / 带快捷键 / H5 嵌入）· 同步 2026-09-29 · 用于站内搜索 / 商品搜索 / 全局搜索

🎨 3 个 variant

Variant 1 · 基本款（PC 标准搜索框）
Variant 2 · 带快捷键（PC 全局搜索 · ⌘K）
⌘K
Variant 3 · H5 嵌入（移动端主搜索 · 高 56px）

💡 搜索建议（下拉）

当输入框有内容时，下方显示建议列表
Tesla Model 3
Tesla Model Y
Tesla Model 3 2024
Popular: Tesla electric SUV

📐 Spec Details

基本款高度
48px
H5 高度
56px
基本款圆角
pill (9999px)
H5 圆角
12px（圆角矩形）
Focus 边框
--yellow-500 + 4px 半透明光晕
Padding
0 16px
字号
14px (PC) · 16px (H5)
快捷键
⌘K / Ctrl+K
建议下拉
12px padding + 8px 圆角
清空按钮
有内容时显示
高亮匹配
--yellow-600（搜索词命中）

🎯 使用规则