: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, 124124, 186, 0.3);
}
常见应用场景
这个特性特别适合以下几种情况：
表单分组高亮
：当用户进入某个字段时，突出显示整个表单项区域，提升视觉引导。
下拉菜单激活
：下拉容器内有搜索框或可聚焦选项时，保持菜单展开或高亮外框。
卡片交互增强
：卡片中包含可编辑内容（如备注、标签输入），聚焦任一子元素时让卡片“活”起来。
实际代码示例
下面是一个带有图标和输入框的搜索区域：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
?
对应的 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 提升用户体验的好工具。