使用:focus伪类可实现输入框聚焦效果，通过改变边框颜色、添加阴影和过渡动画提升用户体验，建议保持样式统一并确保可访问性，该方法适用于textareaselect等表单元素。
在CSS初级项目中，实现表单输入框的聚焦效果是提升用户体验的常见做法。当用户点击输入框时，通过视觉变化提示当前正在输入，可以让界面更友好、更直观。
使用:focus伪类设置聚焦样式
核心方法是利用CSS中的 :focus 伪类选择器，它会在用户点击或通过Tab键选中输入框时生效。
基础示例如下：
input:focus {
outline: none; /* 去除默认轮廓（可选） */
border-color: #007bff; /* 改变边框颜色 */
border-width: 2px;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* 添加发光效果 */
transition: all 0.3s ease; /* 平滑过渡动画 */
}
增强视觉反馈的实用技巧
为了让聚焦效果更自然、美观，可以结合以下几点优化：
立即学习“前端免费学习笔记（深入）”；
- 添加过渡动画：使用 transition 让边框和阴影变化更柔和
- 统一设计风格：所有输入框保持一致的聚焦样式，避免页面混乱
- 保留可访问性：若去除 outline，请务必提供足够明显的替代样式，否则会影响键盘用户操作
适用于不同类型的表单元素
该方法不仅适用于 input[type="text"]，也可用于其他表单控件：
textarea:focus,
select:focus {
border-color: #28a745;
box-shadow: 0 0 6px rgba(40, 167, 69, 0.4);
}
这样能让整个表单的交互体验保持一致。
基本上就这些。掌握:focus用法后，再配合一点色彩和阴影，就能做出清晰又专业的输入框聚焦效果。
