输入框获焦时应使用 rgba() 设置 border-color 并配合 outline: 2px solid transparent、transition 和深色模式适配，以提升可访问性与视觉一致性。
输入框获得焦点时颜色太淡、看不清，本质是默认的 outline 或 border-color 对比度不足。直接用 border-color 配合 rgba() 是最可控、兼容性好、不破坏设计的一招。
用 rgba() 提升焦点边框的视觉重量
纯色边框（比如 #007bff）在浅色背景上可能不够醒目；改用带透明度的 rgba 反而能增强“浮现感”——因为 rgba 会和背景轻微混合，形成柔和但清晰的对比边缘。
- 别写
border-color: #007bff;，试试border-color: rgba(0, 123, 255, 0.8); - 如果背景是白色，
rgba(0, 123, 255, 0.9)更扎实；若背景略灰，可降到0.7避免刺眼 - 配合
border-width: 2px（默认常为 1px），视觉强化更明显
同时移除 outline 避免双线干扰
很多浏览器在 focus 时既加 border 又保留默认 outline（尤其是 Chrome/Firefox），结果出现两圈高亮，反而模糊焦点区域。
- 加上
outline: none;或更稳妥的outline: 2px solid transparent; - 推荐后者：保留键盘导航的可访问性轮廓（部分屏幕阅读器依赖 outline），又不干扰视觉
加一点 transition 让焦点切换更自然
生硬的颜色跳变会削弱专业感。给边框加过渡，能让焦点入场更友好。
立即学习“前端免费学习笔记（深入）”；
-
transition: border-color 0.2s ease-in-out;就足够平滑 - 如果用了 box-shadow 辅助聚焦，也一并加到 transition 里：
transition: border-color 0.2s, box-shadow 0.2s;
适配深色模式的小技巧
如果站点支持深色模式，rgba 值要微调——同一组 rgba 在黑底上会显得更亮、更“浮”，容易过曝。
- 深色模式下可降低 alpha 值，例如从
0.8改为0.6 - 用
@media (prefers-color-scheme: dark)单独覆盖，或借助 CSS 自定义属性统一管理
基本上就这些。不用 JS、不改结构，几行 CSS 就让焦点真正“被看见”。关键不是更亮，而是更可信、更一致、更贴合上下文。
