使用:focus伪类为输入框添加视觉反馈，如改变边框、阴影或背景色，提升交互体验；需保留或替换默认outline以保障可访问性，可结合属性选择器和:valid/:invalid实现精准、动态的样式控制。
当用户在网页表单中操作输入框时，如何通过视觉反馈提示当前正在编辑的字段？css选择器提供了一种简洁高效的方式——利用伪类选择器实现聚焦状态的样式控制。这不仅能提升用户体验，也让界面更具交互感。
:focus 伪类选择器的基本用法
在表单控件获得焦点时，:focus 伪类会自动匹配该元素，允许我们为其设置特定样式。
示例：
input:focus { border-color: #007cba; outline: none; box-shadow: 0 0 5px rgba(0, 124, 186, 0.5); }
增强可访问性的聚焦样式设计
虽然可以移除默认 outline，但必须提供替代的视觉提示，否则会影响键盘用户的操作体验。
立即学习“前端免费学习笔记（深入）”；
- 避免完全去除 focus 样式，尤其对残障用户不友好
- 使用 box-shadow 或 border 变化代替原生 outline
- 确保对比度足够，便于识别
推荐做法：
input:focus, textarea:focus, button:focus { outline: 2px solid #007cba; outline-offset: 2px; }
结合属性选择器精确控制表单元素
在复杂表单中，可能只想对特定类型的输入框应用聚焦样式。此时可结合属性选择器进行更精细的匹配。
- [type=”text”]、[type=”email”] 可区分不同输入类型
- 配合 :focus 实现差异化交互效果
例如只针对邮箱输入框：
input[type="email"]:focus { background-color: #f0f9ff; }
与验证状态结合的动态样式策略
聚焦状态常与表单验证联动。用户在填写过程中，可通过样式变化提示格式是否正确。
- 使用 :focus + :valid/:invalid 组合选择器
- 在聚焦时显示实时校验反馈
示例：仅在聚焦且内容无效时标红边框
input:invalid:focus { border-color: #d32f2f; box-shadow: 0 0 4px #d32f2f; }
基本上就这些。合理运用 :focus 及其组合选择器，能让表单交互更直观清晰，同时兼顾美观与可用性。关键是在视觉设计和无障碍支持之间找到平衡点。不复杂但容易忽略细节。