使用:focus伪类可自定义输入框焦点样式，提升交互体验；2. 常见做法包括加粗边框、添加阴影、改变背景色；3. 需保持可访问性，避免完全移除焦点提示。
当用户点击或使用Tab键切换到输入框时，输入框会获得焦点（focus）。通过CSS的:focus伪类选择器，可以自定义输入框获得焦点时的样式，提升用户体验和界面交互性。
使用:focus设置边框高亮
最常见的做法是改变输入框的边框颜色或宽度，让用户清楚知道当前正在操作哪个字段。
input:focus { border: 2px solid #007BFF; outline: none; /* 去除默认轮廓线 */ }说明：将边框设为蓝色加粗，同时移除浏览器默认的外轮廓（outline），可让样式更干净。
添加阴影效果增强视觉反馈
使用box-shadow可以让焦点状态更加明显，适用于现代UI设计。
立即学习“前端免费学习笔记（深入）”；
input:focus { border-color: #0056b3; box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); outline: none; }提示：rgba中的透明度控制阴影柔和度，避免过于刺眼。
改变背景色或文字颜色
除了边框和阴影，也可以轻微调整背景或字体颜色，提供额外视觉提示。
textarea:focus { background-color: #f8f9fa; color: #333; }适用场景：适合表单中需要长时间输入的文本域，让用户感知到输入区域已激活。
兼容性与注意事项
- :focus支持所有主流浏览器，包括IE8+（需注意DOCTYPE声明）
- 不要完全移除outline而不提供替代样式，否则会影响键盘用户的可访问性
- 移动端也支持:focus，但部分老版本Android浏览器表现可能不一致
建议：若去掉outline，务必用border、shadow等方式提供明显焦点指示。
基本上就这些。合理使用:focus能让表单更易用，关键是保持视觉清晰且不失可访问性。
