:focus伪类通过高亮输入框提升表单可访问性与用户体验，应自定义样式如边框、阴影保持视觉统一，避免直接移除outline导致键盘用户操作困难，可通过border-color和box-shadow提供替代反馈；结合placeholder变化实现动态提示，针对错误状态、密码框、搜索框等不同输入类型差异化处理焦点效果，确保交互直观且一致。
当用户在表单中操作输入框时，:focus 伪类能帮助我们清晰地展示当前正在编辑的字段。合理使用 :focus 不仅提升用户体验，也让界面更友好、可访问性更强。
使用 :focus 高亮输入框
默认情况下，浏览器会给获取焦点的输入框添加轮廓（outline），但样式可能不够美观或与设计风格不符。通过自定义 :focus 样式，可以统一视觉效果。
例如：
input:focus {
outline: 2px solid #007acc;
border-color: #007acc;
box-shadow: 0 0 5px rgba(0, 122, 204, 0.3);
}
这样能让用户一眼看出当前操作的是哪个输入框，颜色建议选择品牌色或高对比度色调。
避免移除 outline 的可访问性问题
很多人用 outline: none 去掉默认轮廓，但这样做会影响键盘用户的操作体验。如果必须自定义轮廓，请确保提供替代方案。
立即学习“前端免费学习笔记（深入）”；
正确做法：
input:focus {
outline: none;
border-color: #005a9e;
box-shadow: 0 0 8px #005a9e;
}
确保即使没有默认 outline，也有明显的视觉反馈，保证键盘导航用户也能识别焦点位置。
结合 placeholder 和 focus 提升提示体验
在输入框获得焦点时，可以动态调整占位符文字或整体布局，引导用户更好填写内容。
示例：输入框聚焦时让 placeholder 文字变小或隐藏
input:focus::placeholder {
color: transparent;
font-size: 0.9em;
}
也可以配合 JavaScript 实现“浮动标签”效果，进一步优化交互逻辑。
为不同输入类型定制 focus 效果
不是所有输入框都应有相同表现。可以根据用途差异化处理。
- 错误状态下的输入框获取焦点时，可清除红色边框并恢复为正常高亮
- 密码输入框聚焦时，可显示强度提示区域
- 搜索框可扩展宽度或添加动态背景
.error-input:focus {
border-color: #007acc;
box-shadow: 0 0 6px #007acc;
}
基本上就这些。合理利用 :focus 能让表单更直观、易用，关键是保持一致性，同时不牺牲可访问性。不复杂但容易忽略。
