聚焦边框颜色不生效是因未覆盖:focus-visible；需用.form-control:focus-visible加!important，并调整box-shadow或css变量--bs-form-control-focus-box-shadow统一控制。
聚焦边框颜色改不生效，是因为没覆盖 :focus-visible
Bootstrap 5.3+ 默认用 :focus-visible 而非 :focus 触发聚焦样式，只写 .form-control:focus 在键盘导航时完全没反应。浏览器会忽略它，导致你调了颜色却看不到变化。
- 必须用
.form-control:focus-visible，且加!important—— Bootstrap 原生规则带!important，不加会被覆盖 - 别只改
border-color：默认box-shadow的视觉权重远高于边框，尤其当border-width是1px时，几乎看不见新颜色 - 深色背景上
rgba(13, 110, 253, 0.25)看起来像灰边？不是颜色错，是透明度太低——把 alpha 提到0.3或换更饱和的主色，比如rgba(106, 90, 205, 0.25)
用 CSS 变量统一改所有表单控件的聚焦边框
如果你用的是 Bootstrap 5.3+，直接覆盖 --bs-form-control-focus-box-shadow 比写一堆选择器靠谱得多。这个变量控制 .form-control、.form-select、.form-check-input 的 :focus-visible 阴影，一改全改，不会漏。
- 放在自定义 CSS 最末尾，或
<style></style>块底部，确保加载顺序在 Bootstrap 主样式之后 - 示例：
:root { --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25); } - 配套改
--bs-form-control-focus-border-color只在 border 显式存在且未被阴影遮盖时才起作用，比如你禁用了box-shadow后想靠边框反馈
移除聚焦边框后，键盘用户看不见焦点了怎么办
直接写 outline: none 或 box-shadow: none 会彻底抹掉键盘导航用户的焦点指示，违反 WCAG。真正要做的不是“删除”，而是“替换”。
- 保留
outline: 0（不是none），再叠加box-shadow或高对比度border-color，这是 Bootstrap 自身的做法 - 如果真要移除全部视觉反馈，至少留个可访问的 fallback：
outline: 2px solid transparent+outline-offset: 2px，屏幕阅读器和键盘用户仍能感知焦点位置 - 验证方式很简单：用 Tab 键遍历表单，看每个字段获得焦点时是否有明确、一致、足够对比度的视觉提示
聚焦时输入框“跳动”，其实是边框宽度变了
很多自定义样式让输入框一聚焦就上下/左右偏移几像素，根源不是 margin 或 padding，而是边框本身尺寸变化 —— 比如默认 border: 1px solid #ced4da，聚焦时改成 border: 2px solid #0d6efd，多出的 1px 就会撑开盒模型。
- 解决方案：默认状态就设好边框宽度，比如
border: 2px solid #ced4da，聚焦时只变色，不改宽 - 或者放弃 border，全程用
box-shadow做聚焦反馈 —— 它不影响盒模型，布局绝对稳定 - 别在
:focus里加transform或scale：移动端可能触发双击缩放，且对渲染性能有隐性损耗
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
