:focus伪类用于定义表单元素获得焦点时的样式，如input、textarea等。当用户点击或使用Tab键激活元素时，通过设置border-color、box-shadow等属性可增强视觉反馈，提升交互体验。需注意清除默认outline后应提供替代样式，如改变边框、背景色或添加阴影，确保键盘用户的可访问性。统一应用于各类表单控件可保持界面风格一致，合理使用能显著提高表单可用性和美观度。
当用户点击或使用键盘 tab 键进入输入框时，浏览器会触发 :focus 伪类。利用这个特性，可以自定义输入框获得焦点时的样式，提升用户体验和界面交互感。
什么是 :focus 伪类
:focus 是 CSS 中的一个动态伪类，用于选中当前处于“聚焦”状态的表单元素，比如 input、textarea、button 等。一旦元素被激活（如点击或通过 Tab 键选中），:focus 样式就会生效。
基本用法示例
以下是一个简单的输入框聚焦样式设置：
input {
border: 1px solid #ccc;
padding: 8px;
font-size: 16px;
outline: none; /* 先清除默认轮廓 */
}
<p>input:focus {
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}</p>说明：
立即学习“前端免费学习笔记（深入）”；
- border-color：改变边框颜色，提示用户当前正在输入。
- box-shadow：添加外发光效果，增强视觉反馈。
- outline: none：去除浏览器默认的聚焦轮廓线，但建议替换为其他可见样式，避免影响可访问性。
适用更多元素类型
:focus 不仅限于文本输入框，还可用于多种表单控件：
textarea:focus,
select:focus,
button:focus {
border-color: #28a745;
box-shadow: 0 0 6px rgba(40, 167, 69, 0.3);
}
统一设计风格，让整个表单交互更一致。
可访问性注意事项
不要完全移除 focus 样式，否则键盘用户将难以判断当前操作的元素。如果隐藏了 outline，务必提供替代的视觉提示，例如：
- 改变背景色（background-color）
- 加粗边框（border-width）
- 添加内阴影（inset box-shadow）
基本上就这些。合理使用 :focus 能显著提升表单的可用性和美观度，关键是保持清晰的视觉反馈。不复杂但容易忽略细节。
