使用:focus伪类和transition实现表单高亮，通过改变边框颜色、添加box-shadow发光效果，提升用户体验。
当用户点击输入框时，让表单元素高亮显示，能提升用户体验和界面交互感。通过 CSS 可以轻松实现表单聚焦时的高亮效果，主要利用 :focus 伪类选择器来控制样式变化。
使用 :focus 伪类添加边框高亮
最常见的高亮方式是改变输入框的边框颜色或宽度。当用户点击输入框时，触发:focus状态，应用更醒目的边框样式。
- 设置默认边框为浅色
- 在:focus状态下改为强调色（如蓝色或绿色）
- 可增加边框宽度增强视觉反馈
示例代码：
input { border: 2px solid #ccc; padding: 10px; outline: none; /* 去除浏览器默认轮廓 */ transition: border-color 0.3s ease; } <p>input:focus { border-color: #007bff; }</p>
添加阴影增强聚焦提示
除了边框，还可以用 box-shadow 制造发光效果，使输入框在聚焦时更加突出。
立即学习“前端免费学习笔记（深入）”；
- 使用 box-shadow 添加外发光
- 配合 transition 实现平滑动画
- 避免过度炫目，保持设计简洁
示例代码：
input:focus { border-color: #007bff; box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); }
整体样式过渡更自然
加入 transition 属性可以让颜色、阴影等变化更柔和，避免突兀跳变。
推荐对常用属性添加过渡效果：
input { border: 2px solid #ddd; padding: 12px; outline: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } <p>input:focus { border-color: #007bff; box-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }</p>
基本上就这些。合理使用:focus和transition，就能做出清晰又美观的表单聚焦高亮效果，不复杂但容易忽略细节。