:focus重置后边框“消失”并非真消失，而是清除了outline却未显式声明border，导致框架（如bootstrap）覆盖原始边框；须先定义完整border（如1px solid #ced4da），再在:focus中仅修改border-color，并补充box-shadow等替代视觉反馈以保障可访问性。
为什么:focus重置后边框“消失”了
不是边框真没了，而是你清掉了outline但没补border初始值。浏览器默认input的border是border: 1px solid #ced4da（Bootstrap）或border: 2px inset（原生），但一旦你写了outline: none又没显式声明border，某些框架（比如Bootstrap）会把整个border规则覆盖掉，导致聚焦前后都看不见边框。
常见错误现象：加了input:focus { outline: none; border-color: #007bff; }，结果非聚焦态边框变淡甚至透明——因为原始border被重置为none或0了。
- 检查Computed面板里
border-width和border-style是否为0或none - 必须在非:focus状态下先定义完整border：
border: 1px solid #ced4da;，再在:focus里只改border-color - 如果用了CSS reset或normalize.css，它可能把input的border设为
0，得手动恢复
如何用:focus安全还原默认边框色
别指望浏览器“自动回退”，所有样式都要你写明。所谓“默认边框色”，其实是当前主题或框架定义的值，不是CSS标准值。
实操建议：
- 查Bootstrap源码或开发者工具Computed值，找到当前
.form-control的border-color（如#ced4da），直接复用 - 不要用
border-color: initial——它在不同浏览器下表现不一致，Chrome返回black，Firefox可能为空 - 稳妥写法：
input { border: 1px solid #ced4da; } input:focus { border-color: #007bff; outline: none; } - 若项目支持深色模式，需配合
@media (prefers-color-scheme: dark)单独设暗色边框值
:focus伪类触发但边框不变色的排查点
写了:focus规则却没反应，90%不是语法错，而是被更高优先级规则压住或属性缺失。
关键检查项：
-
input:focus被.form-control:focus覆盖？换成.form-control:focus或加!important（仅调试用） - 是否漏写了
outline: none？没清掉默认outline，新border-color会被盖住 - border-style是否为
solid？border: 1px #007bff无效，必须是border: 1px solid #007bff - 移动端iOS Safari对
:focus渲染延迟，真机测试时点一下再松手，别只靠鼠标悬停模拟
恢复默认边框的同时保留可访问性
单纯“还原默认”不够——用户需要知道焦点在哪。outline被清掉后，必须提供替代视觉反馈。
推荐组合：
input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); }-
box-shadow第四位alpha值不能低于0.15，否则深色背景下不可见 - 禁用
outline后，务必测试Tab键导航：焦点移动时是否有清晰轮廓 - 别用
transition: border-color .2s却不设初始border——动画起始状态不存在，会闪一下才生效
真正难的不是写:focus，是让每个用户——无论用鼠标、键盘还是触摸屏——都能一眼认出当前焦点在哪。这点容易被忽略，但绕不开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
