input:focus边框变色无效的三大原因：一是outline未清除导致覆盖，需加outline:none；二是原始border未定义，聚焦时无对比；三是选择器权重不足或transition未写在默认状态中。
input:focus 边框变色没反应，先查这三件事
写了 input:focus { border-color: #007bff; } 却没变化，大概率不是代码写错，而是被浏览器默认行为或样式覆盖了。最常踩的坑是：outline 还在、选择器权重不够、原始状态没定义 border。
- 必须加
outline: none;或outline: 0;——否则 Chrome/Safari 的蓝色轮廓会压在你设的边框上，看起来像“没生效” - 确保基础样式里已声明
border，比如input { border: 1px solid #ccc; }；否则聚焦时只有颜色变化，宽度/样式不一致会导致视觉跳动 - 检查 DevTools 的 Elements 面板，看你的
:focus规则是否被划掉（表示被更高优先级样式覆盖），可临时改用input[type="text"]:focus提升权重
transition 写在哪、写什么，直接影响动画是否自然
边框颜色突变很机械，加 transition 是必要步骤，但位置和属性选错反而更糟。
-
transition必须写在非聚焦的默认状态里，且只过渡明确需要的属性，例如：input { border: 1px solid #ccc; transition: border-color 0.2s ease-in-out; } - 别写
transition: all 0.2s;——它会把background、box-shadow甚至font-size全拖进来，造成意外抖动 - 如果同时用了
box-shadow，记得也加进transition：transition: border-color 0.2s, box-shadow 0.2s;
outline 和 border 到底该用哪个
这不是风格偏好问题，而是盒模型稳定性问题。
- 已有边框（如
border: 1px solid #ddd）→ 优先改border-color，加outline: none避免双线 - 无边框设计（如下划线式
border-bottom: 1px solid #aaa）→ 用outline: 2px solid #007bff更安全，它不占布局空间，不会引起重排 - Safari 对
outline-style: auto渲染异常，一律写outline-style: solid，并配outline-offset: 2px控制距离
:focus-visible 是键盘用户的救命稻草
鼠标点击输入框时，你可能根本不想看到高亮边框；但键盘用户按 Tab 进入时，又必须有清晰反馈——:focus-visible 就是为这种场景存在的。
- 推荐组合写法：
input:focus { outline: none; }+input:focus-visible { outline: 2px solid #007bff; } - 旧浏览器（如 Safari :focus-visible，所以必须保留
:focus作为回退，不能只写:focus-visible - 别忽略暗色模式：
@media (prefers-color-scheme: dark) { input:focus-visible { outline-color: #6a9fff; } }，否则用户切到深色系统，边框就消失了
:focus，而是判断什么时候不该用它：比如表单校验错误时，焦点样式该和错误态叠加还是分离？这时候往往得靠 JS 控制 class 切换，而不是只依赖伪类。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
