css样式中focus有什么用

# CSS样式中focus有什么用

## 一、什么是:focus伪类

`:focus`是CSS中的一个**伪类选择器**，用于匹配当前获得焦点的表单元素或可交互元素。当用户通过鼠标点击、键盘Tab键导航等方式激活某个元素时，该元素即处于`focus`状态。

```css
input:focus {
  border-color: blue;
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

二、核心作用与使用场景

1. 提升表单可用性

• 视觉反馈：为输入框、选择框等表单元素添加聚焦样式，帮助用户明确当前操作位置
• 键盘导航支持：使键盘用户在Tab切换时能清晰识别焦点位置

2. 无障碍访问(A11Y)必备

符合WCAG 2.1标准，确保： - 焦点可见性（2.4.7） - 键盘可操作性（2.1.1）

3. 现代UI交互设计

• 微交互效果（如动画过渡）
• 浮动标签样式变化
• 动态提示显示

三、实际应用示例

基础表单增强

/* 输入框聚焦样式 */
input:focus, textarea:focus {
  outline: 2px solid #4CAF50;
  background-color: #f8f8f8;
}

/* 按钮聚焦样式 */
button:focus {
  transform: scale(1.05);
  box-shadow: 0 0 0 3px rgba(0,123,255,.25);
}

高级交互效果

/* 浮动标签效果 */
.input-group:focus-within label {
  transform: translateY(-120%) scale(0.9);
  color: #0066cc;
}

/* 平滑过渡动画 */
input:focus {
  transition: all 0.3s ease-out;
}

四、注意事项与最佳实践

1. 不要移除outline

错误做法：

/* 禁用默认焦点轮廓（违反无障碍原则） */
:focus {
  outline: none;
}

正确替代方案：

:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

2. 组合使用伪类

/* 不同状态组合 */
button:hover:focus {
  background-color: darken(primary-color, 15%);
}

/* 验证状态 */
input:focus:invalid {
  border-color: #ff4444;
}

3. 现代CSS扩展

• :focus-visible：区分鼠标和键盘焦点
• :focus-within：父容器焦点状态

/* 仅对键盘操作显示焦点样式 */
button:focus-visible {
  outline: 3px dashed #000;
}

五、浏览器兼容性

六、总结

:focus伪类是构建可访问、用户友好界面的关键工具。合理使用可以： 1. 显著提升表单操作体验 2. 满足无障碍设计要求 3. 创建精致的交互效果 4. 适配多种输入方式（鼠标/键盘/触摸）

开发时应始终遵循”焦点可见”原则，结合现代CSS选择器创建更智能的焦点管理方案。 “`

注：本文约750字，采用Markdown格式编写，包含代码示例、兼容性表格等技术内容，符合技术文档规范。可根据需要调整具体示例或补充更多使用场景。