:focus 和 :focus-within 结合使用可提升表单可访问性与用户体验，:focus 提供元素聚焦反馈，:focus-within 实现容器级状态感知，如高亮表单项、触发浮动标签；需注意浏览器兼容性与样式冲突。
在构建可访问且用户体验良好的表单时，CSS 的 :focus 和 :focus-within 伪类是两个非常实用的工具。单独使用已能提升交互反馈，而结合使用则能更精准地控制表单区域的视觉状态，从而优化用户操作体验。
:focus：聚焦元素的即时反馈
当用户通过键盘或鼠标点击使某个表单元素（如 input、textarea、button）获得焦点时，:focus 伪类就会被激活。常用于高亮当前正在操作的输入框。
例如：- 改变边框颜色或添加外发光效果，让用户清楚知道当前输入位置。
- 配合 transition 实现平滑的视觉过渡，避免突兀变化。
示例代码：
input:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
:focus-within：容器级的聚焦感知
与 :focus 作用于单个元素不同，:focus-within 应用于父容器，只要其内部任意子元素获得焦点，该容器就会匹配此伪类。这对表单布局尤其有用。
立即学习“前端免费学习笔记（深入）”；
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 整个表单项（label + input + 提示文本）包裹在一个 div 中，当 input 获得焦点时，高亮整个区块。
- 动态显示隐藏的帮助文本或清除按钮。
- 增强可访问性，让屏幕阅读器用户之外的普通用户也能直观识别当前操作区域。
示例代码：
.form-group:focus-within {
background-color: #f8f9fa;
border-radius: 4px;
padding: 8px;
}
结合使用：实现更智能的交互反馈
将 :focus 与 :focus-within 配合使用，可以分层控制样式，既保留元素级别的细节反馈，又提供上下文层面的视觉引导。
- 用 :focus 处理输入框本身的样式变化（如边框、阴影）。
- 用 :focus-within 控制外层容器的背景、间距或子元素显示（如错误提示提前显现、标签上移等）。
- 避免重复样式覆盖，保持结构清晰。例如，不要在两者中同时设置 conflicting 的背景色。
实际案例：浮动标签（Floating Label）效果
.form-group label {
transition: transform 0.2s ease, color 0.2s ease;
}
.form-group:focus-within label {
transform: translateY(-20px);
font-size: 14px;
color: #007bff;
}
input:focus {
border-bottom: 2px solid #007bff;
}
注意事项与兼容性
- :focus-within 不支持 IE 浏览器，但在现代浏览器中兼容性良好（Chrome 68+, Firefox 52+, Safari 12+）。
- 对于需要支持旧浏览器的项目，可结合 JavaScript 模拟 :focus-within 行为，或降级处理样式。
- 始终确保 focus 样式足够明显，符合无障碍标准（如 WCAG 对对比度的要求）。
基本上就这些。合理利用 :focus 和 :focus-within，能让表单交互更自然、更易用，尤其对键盘导航用户非常友好。不复杂但容易忽略。
