首页 > 文章 > 前端

输入框聚焦显示关联元素，失焦隐藏方法

时间：2026-02-06 22:36:45 245浏览收藏

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《输入框聚焦显示关联元素，失焦隐藏技巧》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

CSS 实现输入框聚焦时显示/失焦时隐藏外部关联元素

本文介绍如何仅使用纯 CSS 实现：当深层嵌套的 `<input>` 获得焦点时，自动显示其后方同级的 `.class-target` 元素；失焦时则隐藏。核心在于正确运用 `:focus-within` 伪类与相邻兄弟选择器（`+`），无需 JavaScript。

在实际开发中（尤其是使用 Vuetify 等 UI 框架时），表单控件结构往往高度嵌套，<input> 可能深藏于多层

内部。此时若想通过 CSS 控制外部非父级元素（如紧邻的提示框、下拉面板等）的显隐，不能依赖 :focus 直接作用于 <input> 后再向上查找（CSS 无法“向上选择”），而应巧妙利用 :focus-within —— 它会匹配自身或任意后代获得焦点的元素。

✅ 正确思路是：

将 :focus-within 应用于包含 <input> 的最近公共容器（如 .v-text-field）；
使用 + 相邻兄弟选择器定位其后紧跟的 .class-target；
失焦时默认隐藏，聚焦时覆盖为 display: block（或其他可见样式）。

以下是可直接运行的完整示例：

<!-- 输入容器（含深层嵌套 input） -->
<div class="v-input custom-search input-small v-text-field">
  <div class="v-input__control">
    <div class="v-input__slot">
      <div class="v-text-field__slot">
        &lt;input id=&quot;input-17&quot; type=&quot;text&quot; placeholder=&quot;点击试试&quot;&gt;
      </div>
    </div>
    <div class="v-text-field__details">
      <div class="v-messages theme--light">
        <div class="v-messages__wrapper"></div>
      </div>
    </div>
  </div>
</div>

<!-- 需要控制显隐的目标元素（必须紧邻 v-text-field） -->
<div class="class-target">Target —— 输入框聚焦时显示</div>

/* 默认隐藏目标元素 */
.class-target {
  display: none;
  width: 200px;
  height: 40px;
  background: #e3f2fd;
  border: 1px solid #2196f3;
  border-radius: 4px;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 14px;
}

/* 当 .v-text-field 或其任意后代（如 input）获得焦点时，显示紧邻的 .class-target */
.v-text-field:focus-within + .class-target {
  display: block;
}

⚠️ 关键注意事项：

.class-target 必须是 .v-text-field 的下一个相邻兄弟元素（即 HTML 中紧挨着写在后面），否则 + 选择器不生效；
若中间插入其他元素（如注释、空格
），需改用通用兄弟选择器 ~，但会匹配所有后续同类元素，需谨慎；
:focus-within 兼容性良好（Chrome 60+、Firefox 52+、Safari 15.4+、Edge 79+），现代项目可放心使用；
避免误写为 input:focus-within > .class-target —— :focus-within 不适用于单个 <input>（它本身不包含后代），且 > 子选择器无法跨层级跳转到外部元素。

总结：纯 CSS 实现焦点联动显隐，核心在于「容器级聚焦检测 + 兄弟元素定位」。掌握 :focus-within 的语义和 + 选择器的约束条件，即可优雅解耦 DOM 结构与交互逻辑，提升代码可维护性与性能。

终于介绍完啦！小伙伴们，这篇关于《输入框聚焦显示关联元素，失焦隐藏方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

前往漫画官网入口并下载 ➜