问题核心是outline而非border——浏览器默认为:focus元素添加不占布局空间的高优先级outline，覆盖border-color；直接outline:none会损害键盘用户可访问性，应改用带过渡的box-shadow替代并适配暗色模式与移动端兼容性。
outline 是问题核心，不是边框（border）本身在作怪——浏览器默认加的是 outline，它叠在元素外层、不占布局空间，且优先级高到能盖住你写的 border-color。直接设 outline: none 能“消失”蓝框，但会切断键盘用户的焦点感知路径。
为什么 input:focus 改了 border-color 还是看到蓝框
因为蓝框根本不是 border，而是浏览器内置的 outline。Chrome/Firefox 默认给 input:focus 加了 outline: -webkit-focus-ring-color auto 1px（或类似值），视觉上就是那个突兀的蓝色环。
- 用 DevTools 的 Computed 面板点开
outline，能看到它没被覆盖，只是被你忽略 -
outline: 0不等于outline: none：前者宽度为 0 但仍参与渲染，后者才真正移除 - 某些 UI 框架（如 Bootstrap）会用
!important锁死outline，你的规则必须更具体或加!important才能压过
如何安全地替换默认 outline 而不牺牲可访问性
不能只删，得补。键盘用户靠视觉焦点环定位当前操作位置，删掉等于让他们“摸黑操作”。推荐用 box-shadow 替代，它可控、可动画、支持无障碍对比度要求。
- 固定
border宽度（比如始终border: 1px solid #ccc），避免聚焦时重排抖动 - 用
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25)模拟外发光，比改border-width更稳 - 加
transition: box-shadow 0.2s ease，GPU 加速，低配设备也不卡 - 暗色主题下
rgba(0, 123, 255, 0.25)可能不够显，需配合@media (prefers-color-scheme: dark)调整颜色
outline 和 box-shadow 在移动端的兼容陷阱
iOS Safari 对 input[type="date"]、input[type="number"] 等原生控件有强干预，哪怕写了 outline: none + box-shadow，系统 UI 仍可能覆盖你的样式，尤其在弹出键盘后。
立即学习“前端免费学习笔记（深入）”；
- 真机测试必做：模拟器里正常 ≠ 实机有效
- 对非
text类型输入框，加tabindex="0"强制获得焦点能力（部分安卓 WebView 也吃这一套） - 别只依赖
:focus：配合:active或 JS 的focusin事件做视觉兜底 - Safari 有时延迟渲染
:focus样式，加transition: border-color 0.15s能让变化更及时可见
最常被忽略的是：焦点状态和表单验证伪类（:valid/:invalid）叠加时，box-shadow 的颜色可能被后续规则覆盖，而你只盯着 :focus 查——得把所有相关状态一起看。
