直接写 input:focus { border-color: red; } 不生效，因 bootstrap 5 默认用 box-shadow 实现焦点高亮且带 !important，而 border-color 默认为 transparent；须改用 .form-control:focus-visible 并同时设置 border-color 和 box-shadow。
为什么直接写 input:focus { border-color: red; } 不生效
Bootstrap 5 的 .form-control:focus 样式默认用 box-shadow 实现高亮，不是靠 border-color。你写的规则会被 Bootstrap 原生的 .form-control:focus 覆盖——它不仅选择器权重更高，还带 !important；更关键的是，border-color 默认是 transparent，即使改了也看不见。
常见错误现象：
- 改完颜色页面没变化
- 键盘 Tab 进入时完全没反馈（漏了
:focus-visible） - 深色背景上光晕发灰（
rgba()透明度太低或颜色饱和度不足）
必须同时处理两件事：清除原生 box-shadow，并补全视觉反馈；且优先级要压过 Bootstrap 的规则。
覆盖 .form-control:focus-visible 是最稳妥的写法
Bootstrap 5.3+ 已默认用 :focus-visible 替代单纯 :focus，只写 :focus 会导致键盘用户完全看不到焦点——浏览器会忽略它。所以你的 CSS 必须显式命中这个伪类。
实操建议：
- 选择器必须用
.form-control:focus-visible，不能简写成input:focus-visible（权重不够） - 加
!important—— 因为 Bootstrap 原生规则就带!important - 必须同时设
box-shadow和border-color，否则视觉不一致 - 示例：
.form-control:focus-visible {
border-color: #dc3545 !important;
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}
用 CSS 变量统一控制所有表单控件的焦点光晕
如果你项目里有 input、select、textarea、甚至 .form-check-input，逐个写选择器容易漏。Bootstrap 5.3+ 提供了 CSS 变量 --bs-form-control-focus-box-shadow，一改全改。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
关键点：
- 变量必须放在
:root或已渲染元素的style属性中才生效 - 值格式严格：必须包含
0.25rem扩散半径，如0 0 0 0.25rem rgba(106, 90, 205, 0.25) - 不要拼错变量名，比如写成
--bs-form-control-focus-shadow（少box-）就无效 - 深色模式下需单独重写：
@media (prefers-color-scheme: dark)内覆盖同一变量
示例：
:root {
--bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(106, 90, 205, 0.25);
}
@media (prefers-color-scheme: dark) {
:root {
--bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(139, 195, 74, 0.3);
}
}
移除焦点光晕时最容易被忽略的可访问性陷阱
很多人想“彻底去掉蓝色边框”，于是写 box-shadow: none !important + outline: none。这会让键盘用户完全失去焦点指示，违反 WCAG。
真正该做的是“替换”，不是“删除”：
- 保留
outline: 0（不是none），再叠加高对比度box-shadow或border - 若真要隐藏原生 outline，至少用
outline: 2px solid transparent+outline-offset: 2px，屏幕阅读器仍能感知 - 验证方式很简单：关掉鼠标，纯用 Tab 键遍历表单，每个字段获得焦点时是否都有明确、一致、足够对比度的视觉提示
别只盯着颜色和形状——焦点样式的存在意义，首先是让人知道“现在正在操作哪个框”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
