使用:focus-within伪类可实现表单容器高亮，当内部输入框获得焦点时，父容器背景变蓝、边框高亮，提升交互体验，无需JavaScript，仅需CSS即可完成。
当用户在表单中输入内容时，让容器自动高亮可以提升交互体验。利用CSS伪类 :focus-within，我们可以轻松实现“只要表单内任意元素获得焦点，父容器就应用样式”的效果，无需JavaScript。
什么是 :focus-within
:focus-within 是一个CSS伪类，它作用于某个元素本身或其任意后代元素获得焦点时。也就是说，只要该元素内部有 input、textarea、select 或可聚焦的元素处于 focus 状态，这个父级元素就会被选中。
这特别适合用于表单容器、卡片、搜索框等需要响应内部交互的场景。
实现表单容器高亮
假设我们有一个简单的表单结构：
立即学习“前端免费学习笔记（深入）”；
<div class="form-container"><label>姓名：</label>
<input type="text" name="name" />
<label>邮箱：</label>
<input type="email" name="email" />
</div>
我们希望当用户点击任意输入框时，整个 .form-container 背景变浅蓝，边框变为蓝色。
CSS代码如下：
.form-container {padding: 16px;
border: 2px solid #ddd;
border-radius: 8px;
transition: all 0.3s ease;
}
.form-container:focus-within {
background-color: #f0f8ff;
border-color: #007bff;
}
这样，一旦输入框被点击，父容器立即高亮，视觉反馈清晰自然。
扩展用法与注意事项
除了背景和边框，你还可以在 :focus-within 中调整阴影、外边距、甚至显示隐藏的帮助文字。
- 配合 transition 使用，让样式变化更平滑
- 可用于嵌套较深的结构，比如卡片内的搜索框
- 支持现代浏览器（Chrome、Firefox、Safari、Edge），IE不支持
- 避免过度使用动画，以免干扰用户输入
基本上就这些。:focus-within 让我们能用纯CSS实现原本需要JS才能完成的交互反馈，简洁又高效。
