使用: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; } <p>input:focus { border-color: #007bff; box-shadow: 0 0 8px rgba(0, 123, 255, 0.6); }</p>
transition 使边框和阴影的变化过程更柔和，提升用户体验。
3. 针对不同类型的输入框定制聚焦效果
你可以为文本框、密码框、邮箱等分别设置不同的聚焦样式。
input[type="text"]:focus, input[type="email"]:focus { border-color: #28a745; box-shadow: 0 0 6px rgba(40, 167, 69, 0.4); } <p>input[type="password"]:focus { border-color: #ffc107; box-shadow: 0 0 6px rgba(255, 193, 7, 0.4); }</p>
这样可以根据输入内容类型提供差异化的视觉反馈。
4. 结合 label 提示文字一起变化（可选进阶）
如果想让对应的标签也响应聚焦状态，可以结合 html 结构使用 :focus-within。
.form-group:focus-within label { color: #007bff; font-weight: bold; }
HTML 示例：
<div class="form-group"> <label for="username">用户名</label> <input type="text" id="username"> </div>
当输入框聚焦时，其父容器内的 label 文字也会变色，进一步提升可用性。
基本上就这些。合理使用 :focus 和过渡效果，能让表单更直观易用。关键是要保持一致性，同时避免过度设计影响可读性。