: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 添加边框或背景色。
基本用法示例
<div class="input-group"> <label for="name">姓名</label> <input type="text" id="name" /> </div>
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, 124, 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 可以轻松增强表单交互体验，让输入区域更直观易用。