使用:focus和:focus-within伪类可提升表单可用性与可访问性，通过高亮输入框及容器状态，结合语义化结构实现清晰的视觉反馈。
当用户在表单中操作时，清晰的焦点提示能显著提升可用性和可访问性。合理使用 :focus 和 :focus-within 伪类，可以让用户明确知道当前正在操作哪个输入框，甚至感知整个表单区域的状态变化。
使用 :focus 高亮当前输入框
:focus 是最常用的伪类之一，用于选中获得输入焦点的元素。通过它，可以为输入框添加视觉反馈，比如边框变色、外发光或背景微调。
常见做法如下：
- 改变边框颜色或宽度，突出当前活跃输入框
- 添加 box-shadow 制造“发光”效果，增强可识别性
- 避免仅依赖颜色变化，确保色盲用户也能分辨
border-color: #007bff;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
注意：移除默认 outline 时，必须提供替代样式，否则会降低键盘导航的可访问性。
立即学习“前端免费学习笔记（深入）”；
用 :focus-within 监控容器整体聚焦状态
:focus-within 是一个更强大的伪类，只要其内部任意子元素获得焦点，它就会生效。这对包裹多个字段的 form 或 div 容器特别有用。
典型应用场景包括：
- 当用户进入某个表单区域时，给整个容器添加边框或阴影
- 动态显示隐藏的帮助文本或操作按钮
- 调整布局间距，让当前区域更易识别
background-color: #f8f9fa;
border-radius: 8px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
.help-text {
opacity: 0;
transition: opacity 0.3s;
}
.form-group:focus-within .help-text {
opacity: 1;
}
结合语义结构提升交互体验
将这两个伪类与良好的 HTML 结构结合，能进一步优化用户体验。例如使用 fieldset 包裹相关字段，在聚焦任一输入时高亮整个区块。
- 用 legend 标注字段组用途，辅助屏幕阅读器
- 配合 :focus-within 实现动态样式增强
- 保持焦点样式的统一性，避免不同浏览器表现差异
border-color: #007bff;
background-color: #eef5ff;
}
基本上就这些。合理运用 :focus 和 :focus-within，不仅能提升表单的视觉反馈，还能增强可访问性和整体交互流畅度。关键是确保所有用户，无论是否使用鼠标，都能清楚地看到当前操作的位置。
