:focus-within是CSS伪类，当元素自身或其任意后代获得焦点时触发，适合搜索栏展开；它无需JS、天然支持点击和Tab交互，但要求input必须为容器的后代且可聚焦。
什么是 :focus-within，它为什么适合搜索栏展开
:focus-within 是一个伪类，当元素本身或其任意后代获得焦点时触发。对搜索栏来说，用户点击输入框（<input>）或用 Tab 进入它，都会让外层容器（比如 <div class="search">）匹配 <code>:focus-within —— 这比监听 input:focus 更直接，也避免了 JS 绑定事件的开销。
它天然适配“点击即展开”的交互：不需要 JS 切换 class，也不依赖 :hover 那种鼠标悬停的不稳定性。
基础 HTML 结构必须满足后代聚焦条件
:focus-within 只在祖先-后代关系成立时生效。常见错误是把 <input> 放在容器外部，或用了 display: none 导致 DOM 不可聚焦。
确保结构类似这样：
立即学习“前端免费学习笔记（深入）”；
<div class="search-wrapper"> <button class="search-toggle">?</button> <input type="text" class="search-input" placeholder="搜索..."> </div>
注意：
-
<input>必须是.search-wrapper的直系或嵌套后代 -
tabindex不需要加——<input>默认可聚焦 - 如果用
<label></label>包裹<input>，依然有效，因为<input>还是后代
CSS 展开动画的关键写法和避坑点
展开效果本质是控制高度、内边距、透明度等属性的过渡。但有三个容易被忽略的限制：
-
height从0到auto无法过渡，必须用max-height代替 -
visibility: hidden和opacity: 0要配合使用，否则过渡期间可能闪动或仍可聚焦 -
:focus-within在移动端软键盘弹出后依然保持匹配，所以收起逻辑不能只靠失焦（需额外处理，见下一点）
推荐写法示例：
.search-wrapper {
position: relative;
max-height: 40px;
overflow: hidden;
transition: max-height 0.25s ease, padding 0.25s ease;
}
.search-wrapper:focus-within {
max-height: 200px;
padding: 4px 8px;
}
.search-input {
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.search-wrapper:focus-within .search-input {
opacity: 1;
transform: translateY(0);
}移动端软键盘导致的失焦异常怎么处理
iOS Safari 和部分安卓浏览器中，软键盘弹出会触发 blur，但 :focus-within 仍为 true（因为 <input> 实际仍处于聚焦状态）。这会导致用户收起键盘后，搜索栏还维持展开态。
解决思路不是阻止 :focus-within，而是加一层“主动收起”机制：
- 给
.search-wrapper添加tabindex="-1"，让它可被 JS 聚焦/失焦 - 监听
focusout事件，检查event.relatedTarget是否仍在本容器内 - 若不在，且非点击了其他可聚焦元素，则手动
blur()输入框并重置状态（仅当需要完全收起时）
不过，如果只是视觉展开，不强制收起也是合理体验——很多主流产品（如 GitHub 搜索）就保留展开态直到用户明确点击别处。
真正要小心的是：别假设“失焦 = 用户想收起”，尤其在表单流程中，连续输入多个字段时，过早收起反而打断操作。
