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

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

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

什么是 :focus-within

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

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

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

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

.container {
padding: 10px;
border: 1px solid #ccc;
}
.container:focus-within {
background-color: #f0f8ff;
border-color: #007cba;
box-shadow: 0 0 5px rgba(0, 124, 186, 0.3);
}

常见应用场景

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

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

实际代码示例

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

聚好用AI

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

115

查看详情

<div class=”search-group”>
<i class=”icon”>?</i>
<input type=”text” placeholder=”搜索…” />
</div>

对应的 CSS：

.search-group {
display: flex;
align-items: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 4px;
transition: all 0.2s ease;
}
.search-group:focus-within {
border-color: #007cba;
outline: 2px solid #007cba;
outline-offset: 2px;
}
.search-group input {
border: none;
outline: none;
flex: 1;
padding: 8px;
}

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

浏览器兼容性与注意事项

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

document.addEventListener(‘focusin’, function(e) {
if (e.target.tagName === ‘INPUT’ || e.target.tagName === ‘TEXTAREA’) {
e.target.closest(‘.container’)?.classList.add(‘focused’);
}
});
document.addEventListener(‘focusout’, function(e) {
if (e.target.tagName === ‘INPUT’ || e.target.tagName === ‘TEXTAREA’) {
e.target.closest(‘.container’)?.classList.remove(‘focused’);
}
});

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

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