使用:focus伪类可提升表单交互体验，如改变边框色、添加阴影；需保留或替换outline确保可访问性，配合transition实现平滑动画，增强用户体验。
在CSS中，可以通过 :focus 伪类来控制输入框获得焦点时的样式，比如改变边框颜色、背景色或添加阴影，从而突出当前正在操作的输入框。这能提升表单的可用性和用户体验。
使用 :focus 伪类设置焦点样式
:focus 是一个动态伪类，当用户通过鼠标点击或键盘 Tab 键选中输入框时触发。你可以为 、 等可聚焦元素设置该样式。
例如，让输入框在获得焦点时边框变为蓝色：
input:focus {
border-color: #007bff;
outline: none; /* 去除默认外轮廓，自定义样式 */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
- border-color：修改边框颜色以作提示
- outline: none：移除浏览器默认的聚焦轮廓线（通常为蓝色或黑色虚线）
- box-shadow：添加发光效果增强视觉反馈
常见应用场景与建议
在实际开发中，合理使用 :focus 可帮助用户明确当前操作位置，尤其在复杂表单中尤为重要。
立即学习“前端免费学习笔记（深入）”；
- 保持焦点样式清晰可见，但不要过于突兀
- 确保可访问性，避免完全移除轮廓而不提供替代样式（对键盘用户不友好）
- 可以配合 transition 实现平滑过渡效果
加入过渡动画让样式变化更自然：
input {
border: 1px solid #ccc;
padding: 8px;
transition: all 0.3s ease;
}
<p>input:focus {
border-color: #007bff;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}</p>注意事项
虽然 outline: none 能去除难看的默认边框，但必须提供足够的视觉替代方案，否则会影响键盘导航用户的使用体验。无障碍设计推荐保留或替换为明显的样式。
基本上就这些。正确使用 :focus 伪类，能让输入框交互更直观，表单更易用。
