焦点时搜索栏自动展开的CSS实现方法

用纯 :focus 只能作用于 <input> 自身，没法拉长外层容器；而 JS 监听 focus 事件再切 class 又多一层逻辑、易漏掉键盘聚焦（如 Tab 进入）。:focus-within 天然覆盖鼠标点击 + 键盘聚焦，且零 JS。

基础写法：给容器加 focus-within，控制 width 或 transform

关键不是改 input，而是改它的直接父容器（或更高层封装容器），否则宽度撑不开、动画不连贯。

• 确保 <input> 是目标容器的**后代**，不是兄弟或隔代
• 初始状态设为收缩（如 width: 40px），:focus-within 下设为展开（如 width: 240px）
• 必须加 transition，否则宽度突变；推荐用 width + min-width 组合，避免 layout shift

示例：

.search {
  width: 40px;
  min-width: 40px;
  transition: width 0.2s ease;
}
.search:focus-within {
  width: 240px;
}

常见失效原因：HTML 结构和 tabindex 陷阱

很多情况写了 :focus-within 却没反应，基本是以下三点之一：

• <input> 被包在 里但用了 for/id 关联，而 input 没有 tabindex —— 点击 label 不会让 input 获焦，:focus-within 不触发
• 容器设置了 overflow: hidden，展开后内容被裁剪（尤其带 icon 的搜索栏）
• input 被设了 display: none 或 visibility: hidden —— 隐藏元素无法获焦，:focus-within 永远不生效

修复建议：用 <input> 嵌套结构，或确保 input 有 tabindex="0"（仅当它默认不可聚焦时）。

兼容性与 fallback：Safari 15.4+ 才完全支持 focus-within 动画

旧版 Safari（≤15.3）和 IE 完全不支持 :focus-within；即使新版 Safari，对 width 的 transition 在 flex 容器中也可能卡顿。

• 用 @supports (selector(:focus-within)) 包裹样式，避免干扰老浏览器
• 更稳妥的展开方式是用 transform: scaleX() 或 max-width，比直接改 width 兼容性更好
• 如果项目需支持 Safari 14 或更低，就得回退到 JS：监听 focusin 和 focusout，切换 class

真正容易被忽略的是：focus-within 的“后代”判定只看 DOM 树，不看视觉层级。如果用了 position: absolute 把 input 移出容器，哪怕视觉上还在里面，:focus-within 也失效。

终于介绍完啦！小伙伴们，这篇关于《焦点时搜索栏自动展开的CSS实现方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！