怎么在CSS中使用:focus-within实现搜索栏展开特效-css教程-PHP中文网

:focus-within是css伪类，当元素自身或其任意后代获得焦点时触发，适合搜索栏展开；它无需js、天然支持点击和tab交互，但要求input必须为容器的后代且可聚焦。

怎么在css中使用:focus-within实现搜索栏展开特效

什么是 `: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 展开动画的关键写法和避坑点

展开效果本质是控制高度、内边距、透明度等属性的过渡。但有三个容易被忽略的限制：

CSS婚礼策划服务机构宣传网站模板

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);
}