输入框聚焦高亮边框需用:focus伪类，推荐预设border宽度并修改color、禁用outline；或美化outline加offset；配合transition实现平滑动画，并兼顾可访问性。
输入框聚焦时高亮边框，核心是用 :focus 伪类配合 outline 或 border 属性实现。默认浏览器会加 outline（常为蓝色虚线），但通常我们想自定义成更协调的实色边框。
用 border 替换默认 outline
直接修改 border 最直观，且不影响布局（前提是原 border 已设固定宽度）：
input:focus {
border-color: #007bff; /* 高亮主色 */
border-width: 2px; /* 确保宽度一致，避免抖动 */
outline: none; /* 移除默认 outline，防止叠加 */
}⚠️ 注意：如果原 border-width 未声明，聚焦时突然加粗会导致页面轻微重排。建议初始状态就设好边框宽度，例如：
input { border: 2px solid #ddd; }input:focus { border-color: #007bff; outline: none; }
保留 outline 但美化它
若不想改动 border，可用 outline 单独控制聚焦轮廓（不占布局空间）：
立即学习“前端免费学习笔记（深入）”；
input:focus {
outline: 2px solid #007bff;
outline-offset: 2px; /* 轮廓离边框的距离，更清晰 */
}这样既保持原有边框不变，又能添加一层醒目的高亮环。
加过渡动画让效果更自然
聚焦/失焦时加 transition 可避免突兀切换：
input {
border: 2px solid #ddd;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
<p>input:focus {
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); /<em> 额外柔光效果 </em>/
outline: none;
}常见组合：边框变色 + 微弱阴影，视觉层次更丰富。
兼容性与可访问性提醒
移除 outline 时务必提供足够对比的替代样式，否则影响键盘用户操作：
- 别只依赖颜色变化，可叠加
box-shadow或background-color - 确保聚焦态在深色/浅色模式下都清晰可见
- 测试 Tab 键导航是否能明确看到当前焦点位置
