:focus-within 是 CSS 伪类，当元素内任何子元素获得焦点时触发，常用于高亮表单容器。例如 input 获得焦点时，父级 .input-group 应用边框变色或阴影，提升可访问性与用户体验；还可实现输入时显示清除按钮等动态效果，配合 transition 更流畅，现代浏览器支持良好，IE 不支持需 JS 模拟。
当用户与表单元素交互时，:focus-within 是一个非常实用的 CSS 伪类，它能帮助我们为包含获得焦点子元素的容器设置样式。特别适用于输入区域（如 input、textarea）所在的父级容器，比如搜索框、表单卡片或输入组。
什么是 :focus-within？
:focus-within 会匹配一个元素，只要该元素内部有任何子元素获得了焦点。这意味着即使焦点在 input 上，它的父 div 也能响应样式变化。
例如：一个包含 label 和 input 的 div，在 input 获得焦点时，给整个 div 添加边框或背景色。基本用法示例
HTML 结构：
CSS 样式：
立即学习“前端免费学习笔记（深入）”；
.input-group {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
transition: border-color 0.3s ease;
}
.input-group:focus-within {
border-color: #007cba;
box-shadow: 0 0 5px rgba(0, 124124, 186, 0.3);
}
效果：当用户点击 input 输入框时，外层的 .input-group 会立即高亮显示，提升可访问性和用户体验。
实际应用场景
- 表单卡片高亮：在复杂表单中，让用户清楚当前正在填写哪个区域。
- 搜索框激活状态：搜索区域获得焦点后展开或改变背景色。
- 动态显示按钮：输入框获得焦点时，显示“清除”按钮或“提交”提示。
示例：输入时显示清除按钮
.search-group {
display: flex;
align-items: center;
border: 1px solid #ddd;
border-radius: 6px;
padding: 4px;
}
.search-group:focus-within .clear-btn {
opacity: 1;
visibility: visible;
}
.clear-btn {
opacity: 0;
visibility: hidden;
background: none;
border: none;
color: #999;
cursor: pointer;
}
兼容性与注意事项
:focus-within 在现代浏览器中支持良好（Chrome、Firefox、Edge、Safari），但不支持 IE。如果需要兼容旧版浏览器，可结合 JavaScript 模拟实现。
使用建议：
- 避免过度使用动画，保持界面简洁。
- 配合 transition 让视觉变化更自然。
- 注意可访问性，确保焦点状态对键盘用户也清晰可见。
基本上就这些。利用 :focus-within 可以轻松增强表单交互体验，让输入区域更直观易用。
