:focus样式无效最常见原因是默认outline覆盖自定义border，须同时清除outline并提供可访问的替代反馈（如box-shadow），且需兼顾键盘用户与wcag标准。
为什么:focus样式写了却没反应
最常见原因是浏览器默认的 outline 盖住了你设的 border，尤其在 Chrome、Firefox 和 Safari 中，这个蓝色/灰色轮廓会渲染在边框外层，视觉上“吃掉”你的自定义边框颜色或粗细。不显式处理它，border-color 再怎么改都像没生效。
必须同时做两件事：清掉默认 outline，再补一个可访问的替代反馈。只写 outline: none 是半截操作，会导致键盘用户完全找不到当前焦点在哪。
-
outline: none是必须加的，outline: 0兼容性差，别用 - 别只靠
border-color变化——如果还改了border-width（比如从1px到2px），会触发重排，布局可能抖动 - 移动端 iOS Safari 对
input[type="date"]或input[type="number"]的系统控件有强干预，border-color可能被忽略，优先试box-shadow
用box-shadow替代border实现平滑聚焦效果
直接过渡 border-color 在低端设备上容易卡顿，尤其连带宽度变化时。更稳的方案是固定 border，靠 box-shadow 模拟“高亮边框”——它走 GPU 加速，动画顺，且不会影响布局流。
示例写法：
input {
border: 1px solid #ced4da;
transition: box-shadow 0.2s ease;
}
input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
-
box-shadow的第四值（3px）控制“发光厚度”，和边框视觉权重匹配即可 - 透明度（
0.25）比纯色更柔和，也更符合 WCAG 对对比度与非侵入性的要求 - 避免写
box-shadow: 0 0 5px #007bff这类模糊阴影——它在高分屏上发虚，且键盘焦点提示不够明确
Bootstrap输入框怎么彻底去掉焦点边框
Bootstrap 的 .form-control:focus 主要靠 box-shadow 实现蓝光效果，不是靠 outline。所以只写 outline: none 完全没用，必须把 box-shadow 也干掉。
关键点：你的 CSS 文件得在 Bootstrap 之后加载，否则规则压根不生效。
- 通用写法：
.form-control:focus { outline: none; box-shadow: none; border-color: #ced4da; } - 如果用了 Bootstrap 5+，它的
box-shadow值可能是0 0 0 0.25rem rgba(13, 110, 253, 0.25)，直接写none就行，不用匹配原值 - 别漏掉
border-color重置——不然去掉box-shadow后，边框会突变成 Bootstrap 的焦点蓝（#86b7fe），和设计稿对不上
:focus-visible 才是兼顾鼠标与键盘用户的解法
想让鼠标点击时不显示焦点样式、但键盘 Tab 导航时又必须显示？:focus 不够精细，得升级到 :focus-visible。
它能自动区分焦点来源：只有键盘或辅助技术触发时才生效，鼠标点击/触屏 tap 默认不触发。
- 基础组合：
input:focus:not(:focus-visible) { outline: none; }+input:focus-visible { outline: 2px solid #3b82f6; } - 注意：
:focus-visible在旧版 Safari（≤15.6）不支持，需加降级：先写:focus兜底，再用@supports (focus-visible: auto)包一层增强逻辑 - 别用
!important强顶——它会破坏可访问性检测工具（如 axe）的判定，也增加后续维护成本
真正难的不是写几行 CSS，而是判断什么时候该留 outline、什么时候该换 shadow、什么时候该切到 focus-visible——这些选择直接影响谁能在你的表单里顺利操作。别让“看起来干净”成了某类用户的使用门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
