css :focus-within控制父元素聚焦样式

:focus-within 是 CSS 伪类，当元素自身或后代获得焦点时生效，常用于表单容器高亮、下拉菜单激活和卡片交互；例如输入框聚焦时使父容器变色，提升可访问性与视觉反馈，现代浏览器支持良好，IE 不支持可用 JavaScript 模拟。

当表单元素内部获得焦点时，我们常常希望其父容器也能响应这种状态变化，比如高亮边框或改变背景色。CSS 的 :focus-within 伪类正是为此设计的——它允许父元素在任意子元素获得焦点时应用特定样式。

什么是 :focus-within

:focus-within 是一个 CSS 伪类，应用于一个元素时，只要该元素自身或其任意后代元素处于 focus 状态，这个伪类就会生效。这在构建可访问性良好的表单、下拉菜单或输入框组合时非常实用。

例如，一个包含 label 和 input 的 div 容器，在用户点击输入框时，可以让整个容器变色：

使用 :focus-within 可以轻松实现聚焦反馈：

立即学习“前端免费学习笔记（深入）”；

常见应用场景

这个特性特别适合以下几种情况：

• 表单分组高亮：当用户进入某个字段时，突出显示整个表单项区域，提升视觉引导。
• 下拉菜单激活：下拉容器内有搜索框或可聚焦选项时，保持菜单展开或高亮外框。
• 卡片交互增强：卡片中包含可编辑内容（如备注、标签输入），聚焦任一子元素时让卡片“活”起来。

实际代码示例

下面是一个带有图标和输入框的搜索区域：

聚好用AI

可免费AI绘图、AI音乐、AI视频创作，聚集全球顶级AI，一站式创意平台

115

查看详情

对应的 CSS：

当用户点击输入框时，外层容器立即获得视觉反馈，即使图标或包装元素本身不可聚焦。

浏览器兼容性与注意事项

:focus-within 在现代浏览器中支持良好（Chrome、Firefox、Edge、Safari 通用），但不支持 IE。如果需要兼容旧版浏览器，可用 JavaScript 模拟：

配合 CSS 中的 .container.focused 实现类似效果。

基本上就这些。:focus-within 简洁高效，让结构与行为解耦，是现代 CSS 提升用户体验的好工具。

以上就是css :focus-within控制父元素聚焦样式的详细内容，更多请关注php中文网其它相关文章！