input:focus边框变色无效需查三件事：清除outline、确保默认border已定义、检查css权重与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提升权重
border-color 过渡要写对位置和属性
transition 必须写在非聚焦的默认状态里，且只过渡明确需要的属性，否则动画会失控。
- 正确写法：
input { border: 1px solid #ccc; transition: border-color 0.2s ease-in-out; }+input:focus { border-color: #007bff; } - 别写
transition: all 0.2s;—— 它会把background、box-shadow甚至font-size全拖进来，造成意外抖动 - 如果同时用了
box-shadow，记得也加进 transition：transition: border-color 0.2s, box-shadow 0.2s;
outline 和 border 到底该用哪个
选 border 还是 outline，取决于你的输入框有没有原生边框。这不是风格偏好问题，而是盒模型稳定性问题。
- 已有边框（如
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: #66b3ff; } }，否则深色系统下焦点环直接消失
outline 后，没补任何替代样式。用户用键盘 tab 导航时，焦点会彻底“隐形”。这不是细节问题，是可访问性红线。
