:focus伪类实现搜索框变长更轻量可靠，推荐width+transition或flex控制伸缩，配合box-sizing:border-box；圆角应随长度动态变化，短态小圆角、长态大圆角，Chrome/Safari支持良好。
搜索框点击后变长：用 :focus 触发宽度变化
核心不是“点击”，而是获得焦点（:focus），因为原生 <input type="search"> 点击即聚焦。直接写 :focus 伪类比监听 click 事件更轻量、更可靠。
常见错误是给 width 设固定值（比如从 100px → 300px），但响应式布局下会出问题；更稳妥的是用 min-width + flex 或 max-width 控制伸缩范围。
- 推荐写法：
width: 120px; transition: width 0.3s ease;，然后&:focus { width: 280px; } - 若父容器是
display: flex，可改用flex: 0 1 120px;和&:focus { flex: 1 1 280px; }，避免撑破容器 - 别忘了加
box-sizing: border-box，否则 padding 会额外增加宽度
圆角随长度动态增强：用 border-radius 配合 transition
单纯设 border-radius: 24px 在变宽时显得突兀——短状态用小圆角（如 16px），长状态用大圆角（如 24px 或 32px），视觉更自然。
注意：Chrome 和 Safari 对 border-radius 的过渡支持良好，但旧版 Firefox（will-change: border-radius 提前提示渲染引擎。
立即学习“前端免费学习笔记（深入）”；
- 短态：
border-radius: 16px; - 长态：
&:focus { border-radius: 24px; } - 必须和
width共享同一transition声明，例如：transition: width 0.3s ease, border-radius 0.3s ease; - 别漏掉
outline: none，否则默认蓝色 focus outline 会干扰圆角效果
动画卡顿或跳变：检查 transition 属性是否被覆盖
最常踩的坑是 CSS 优先级导致 transition 生效失败——比如重置样式库（如 Normalize.css）或框架（如 Tailwind）在全局设置了 transition: all 0.2s，而你只写了 transition: width 0.3s，结果被覆盖成 all，触发了不必要的属性过渡（比如 background-color 变化）。
- 用浏览器 DevTools 检查 computed 样式里的
transition，确认实际生效的是你写的那条 - 显式写出所有要过渡的属性，避免
all：transition: width 0.3s ease, border-radius 0.3s ease; - 如果用了
transform: scale()或opacity等属性做辅助动效，务必单独声明，不要混进同一个transition - 移动端要注意
transition-timing-function：ease-out比ease更适合“展开”动作，收回去时用ease-in
兼容性与交互细节：移动端 focus 与 placeholder 处理
iOS Safari 默认会给 input[type=search] 加一个放大镜图标，并且 focus 时自动放大整个输入框——这会干扰你的自定义动画。Android Chrome 则对 border-radius 过渡更敏感，有时首帧偏移。
- 移除默认搜索图标：
input[type="search"]::-webkit-search-decoration { display: none; } - placeholder 文字颜色在 focus 状态下容易看不清，加一句：
&:focus::placeholder { color: #999; } - 为防止 iOS 上键盘弹出时页面缩放，确保
<meta name="viewport">包含user-scalable=no（但慎用，影响可访问性） - 如果搜索框嵌在导航栏里，
position: absolute时需配合z-index，否则 focus 动画可能被遮挡
