:focus伪类用于定义表单元素获得焦点时的样式，提升用户体验与可访问性。通过自定义如边框变色、阴影等视觉反馈，可增强输入状态识别，建议避免完全移除outline，应使用高对比度替代样式确保焦点可见，并可结合:valid、:invalid实现动态校验提示，适用于input、textarea、select等各类表单控件，保持统一设计风格，兼顾美观与可用性。
当用户使用键盘或鼠标点击进入表单输入框时，:focus 伪类会自动生效，用于定义元素获得焦点时的样式。在表单设计中，合理使用 :focus 能提升可访问性和用户体验，帮助用户明确当前正在操作的输入区域。
增强输入框的视觉反馈
默认情况下，浏览器会给获得焦点的输入框添加轮廓（outline），但样式可能不够美观或与设计风格不一致。通过自定义 :focus 样式，可以改善视觉提示。
例如：input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}这段代码移除了默认轮廓，改为蓝色边框和轻微外发光，让用户更清楚当前聚焦的输入框。
提高可访问性
对于依赖键盘导航的用户，清晰的焦点样式至关重要。完全去除 outline 可能影响无障碍体验，建议用更醒目的替代样式代替。
立即学习“前端免费学习笔记（深入）”；
推荐做法：- 保留或替换 outline，确保焦点可见
- 使用高对比度颜色突出聚焦状态
- 配合 label 或 placeholder 提示信息联动变化
与其他状态组合使用
:focus 可与其他伪类结合，实现更丰富的交互效果。
常见组合：
/* 聚焦且有效输入 */
input:focus:valid {
border-color: #28a745;
}
<p>/<em> 聚焦且无效输入 </em>/
input:focus:invalid {
border-color: #dc3545;
box-shadow: 0 0 5px rgba(220, 53, 69, 0.3);
}这类样式可在用户编辑表单时实时反馈输入状态，减少提交错误。
适用于多种表单元素
不只是文本输入框，:focus 同样适用于 textarea、select、button 等表单控件。
统一设计示例：input:focus, textarea:focus, select:focus {
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
z-index: 1;
}保持整个表单的焦点样式一致，有助于形成连贯的操作体验。
基本上就这些。合理使用 :focus 不仅让界面更友好，也体现了对各类用户的尊重。关键是既要美观，也不能牺牲可用性。
