使用:focus伪类可实现输入框聚焦时的视觉反馈，如改变边框颜色、添加阴影，并通过transition使效果更平滑；还可针对不同输入类型设置差异化样式，结合:focus-within让关联label同步响应，提升表单可用性。
当用户点击输入框（即获得焦点）时，我们通常希望有视觉反馈来提升体验。使用 CSS 可以轻松实现表单输入框的聚焦效果，比如改变边框颜色、添加阴影或调整背景色。
1. 基础聚焦样式：使用 :focus 伪类
通过 :focus 伪类，可以定义输入框在获得焦点时的外观。
input:focus {
border-color: #007bff;
outline: none; /* 去除默认轮廓 */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
说明：
- border-color：改变边框颜色，突出当前正在编辑的字段。
- outline: none：浏览器默认会为聚焦元素添加轮廓线，去除它以便自定义样式。
- box-shadow：添加发光效果，增强视觉提示。
2. 添加过渡动画让效果更自然
加入 transition 让样式变化更平滑。
立即学习“前端免费学习笔记（深入）”；
input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
transition: all 0.3s ease;
}
input:focus {
border-color: #007bff;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
}
transition 使边框和阴影的变化过程更柔和，提升用户体验。
3. 针对不同类型的输入框定制聚焦效果
你可以为文本框、密码框、邮箱等分别设置不同的聚焦样式。
input[type="text"]:focus,
input[type="email"]:focus {
border-color: #28a745;
box-shadow: 0 0 6px rgba(40, 167, 69, 0.4);
}
input[type="password"]:focus {
border-color: #ffc107;
box-shadow: 0 0 6px rgba(255, 193, 7, 0.4);
}
这样可以根据输入内容类型提供差异化的视觉反馈。
4. 结合 label 提示文字一起变化（可选进阶）
如果想让对应的标签也响应聚焦状态，可以结合 HTML 结构使用 :focus-within。
.form-group:focus-within label {
color: #007bff;
font-weight: bold;
}
HTML 示例：
当输入框聚焦时，其父容器内的 label 文字也会变色，进一步提升可用性。
基本上就这些。合理使用 :focus 和过渡效果，能让表单更直观易用。关键是要保持一致性，同时避免过度设计影响可读性。
