输入框:focus样式失效主因是焦点未获取或样式被覆盖；需检查disabled/readonly、pointer-events、css优先级及:focus-visible替代:focus；边框跳动源于border-width变化，应固定宽度或改用box-shadow；可访问性要求移除outline后必须提供≥4.5:1对比度的视觉反馈。
输入框聚焦边框“消失”“变色失效”“跳动”或“看不见”，基本不是 bug，而是:focus 触发逻辑、浏览器默认 outline 与 CSS 层叠顺序没对齐。
为什么 :focus 样式写了却没反应？
最常见原因不是选择器写错，而是元素根本没获得焦点——比如被 disabled、readonly 或父级 pointer-events: none 拦住了；或者样式被更高优先级规则（比如 Bootstrap 的 .form-control:focus 带 !important）覆盖了。
- 用开发者工具点开输入框，看 Styles 面板里
:focus是否出现在伪类列表中（灰色变蓝才表示真触发） - 临时清空所有自定义 CSS，只留
input:focus { outline: 2px solid red; }测试基础行为 - 确保没 JS 调用
element.blur()或阻止focus事件
聚焦时边框“突然消失”或“颜色不对”
本质是浏览器默认 outline 盖住了你写的 border，或者你删了 outline 却忘了补视觉反馈。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须显式写
outline: none（不是0），否则 Safari/Firefox 可能仍渲染默认轮廓 - 删掉
outline后，立刻用box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25)替代，不然键盘用户会“失焦” - 如果用
border-color改色，确保默认态和聚焦态的border-width和border-style完全一致，否则尺寸会跳 - 深色背景上
rgba(13, 110, 253, 0.25)看起来像灰？把 alpha 提到0.3或换更饱和主色，比如rgba(79, 70, 229, 0.25)
Bootstrap 5.3+ 中 .form-control:focus 不生效？
因为 Bootstrap 5.3 开始默认用 :focus-visible，不是 :focus。只写 .form-control:focus 在键盘导航时完全不触发。
- 必须用
.form-control:focus-visible，且加!important—— Bootstrap 原生规则带!important，不加会被覆盖 - 别只改
border-color：默认box-shadow的视觉权重远高于 1px 边框，得同步调--bs-form-control-focus-box-shadow - 推荐统一改 CSS 变量：
:root { --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25); }，放在自定义 CSS 最末尾 - 配套改
--bs-form-control-focus-border-color仅在禁用box-shadow后才起作用
聚焦时输入框“上下跳动”
不是 margin 或 padding 动了，是边框宽度变了——比如默认 border: 1px solid #ced4da，聚焦时写成 border: 2px solid #0d6efd，多出的 1px 就撑开了盒模型。
- 默认状态就设好固定宽度：
border: 2px solid #ced4da，聚焦时只变border-color - 更稳妥的做法是全程不用
border，改用box-shadow模拟外发光，完全不干扰布局 - 如果真要用边框，记得检查
box-sizing: border-box是否生效，避免 padding + border 叠加导致尺寸溢出
真正容易被忽略的点是：可访问性不是“锦上添花”，而是底线。移除 outline 之后，box-shadow 的对比度必须 ≥ 4.5:1，且 Tab 键遍历时每个控件都要有明确、一致的视觉提示——这比“看起来漂亮”重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
