使用:focus-within伪类可实现表单容器高亮，当内部输入框获得焦点时，父容器背景变蓝、边框高亮，提升交互体验，无需JavaScript，仅需CSS即可完成。
当用户在表单中输入内容时，让容器自动高亮可以提升交互体验。利用CSS伪类
:focus-within
，我们可以轻松实现“只要表单内任意元素获得焦点，父容器就应用样式”的效果，无需JavaScript。
什么是 :focus-within
:focus-within
是一个CSS伪类，它作用于某个元素本身或其任意后代元素获得焦点时。也就是说，只要该元素内部有 input、textarea、select 或可聚焦的元素处于 focus 状态，这个父级元素就会被选中。
这特别适合用于表单容器、卡片、搜索框等需要响应内部交互的场景。
实现表单容器高亮
假设我们有一个简单的表单结构：
立即学习
“
前端免费学习笔记（深入）
”；
我们希望当用户点击任意输入框时，整个
背景变浅蓝，边框变为蓝色。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
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才能完成的交互反馈，简洁又高效。
.form-container