最稳妥起点是用.form-control:focus加box-shadow，但需同时满足键盘可聚焦、视觉对比≥3:1、不遮挡内容、禁用态不触发；须删全局outline:none、增强alpha值、深色背景用媒体查询切换、禁用态勿加tabindex、自定义控件用label:focus-within并加tabindex="0"。
直接用 .form-control:focus 加 box-shadow 是最稳妥的起点，但仅靠它不够——无障碍高亮必须同时满足键盘可聚焦、视觉对比达标、不遮挡内容、且禁用态不触发。
为什么 :focus 样式常被忽略或失效
Bootstrap 4 默认只给 .form-control:focus 加了浅蓝边框和 box-shadow，但很多项目会全局重置 outline: none 或覆盖 box-shadow，导致键盘用户 Tab 到输入框时完全看不到焦点位置。
- 检查是否在全局 CSS 里写了
*:focus { outline: none; }—— 这是最大雷区，必须删掉或加条件限制 -
.form-control若被包裹在.input-group中，焦点样式可能被.input-group > .form-control:focus的更高权重规则覆盖 - 自定义主题中若改了
$primary变量但没同步更新$input-focus-box-shadow，会导致 focus 状态颜色变淡、对比度不足
符合 WCAG 2.1 AA 的最小对比度怎么设
焦点轮廓（focus ring）与背景色的对比度至少要达 3:1。Bootstrap 4 默认的 box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) 在白底上约 2.6:1，不达标；需手动增强。
- 推荐写法：
.form-control:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); }（提高 alpha 值） - 深色背景（如
.bg-dark）下，浅蓝阴影不可见，应配合媒体查询切换：@media (prefers-contrast: high) { .form-control:focus { outline: 3px solid #007bff; } } - 别只改
box-shadow：加上border-color: #007bff;双重保障，确保即使阴影被禁用（如某些浏览器设置），仍有可见边框
禁用态、只读态、错误态的焦点逻辑怎么处理
禁用态（disabled）的表单控件不应响应 :focus，但很多人误加了 tabindex="0" 或 JS 强制聚焦，破坏可访问性。
- 确认 HTML 属性正确：
—— 不要加tabindex，也不要 JS 调用.focus() - 只读态（
readonly）允许聚焦，但不能修改，此时:focus样式应保留，只是不显示光标或禁用输入逻辑 - 错误态（
.is-invalid）需让焦点样式与错误提示协同：比如.form-control.is-invalid:focus的box-shadow改为红色系，并确保关联的.invalid-feedback在 DOM 中紧邻其后，屏幕阅读器才能自动朗读
自定义复选框/单选框的高亮必须绕开 appearance
Bootstrap 4 的 .custom-control-input 是透明层，真正渲染的是 .custom-control-label::before。所以“高亮”不是给 input 加 focus，而是给 label 加 focus-within 或显式伪类。
- 正确选择器：
.custom-control-label:focus-within::before { box-shadow: 0 0 0 2px #007bff; }（注意是label，不是input） - 必须加
tabindex="0"到.custom-control-label，否则键盘无法聚焦到该区域 - 避免用
:focus直接作用于.custom-control-input—— 它 opacity 为 0，视觉上无变化，且部分屏幕阅读器会跳过 - 勾选后仍需保持焦点环可见，所以
.custom-control-input:checked ~ .custom-control-label:focus-within::before也要覆盖，防止状态叠加时样式丢失
最易被忽略的一点：所有自定义 focus 样式必须在高对比度模式（Windows High Contrast Mode 或 macOS Increase Contrast）下测试，此时 CSS box-shadow 和 background 可能被系统强制清空，唯一可靠的是 outline 或 border。别依赖设计师给的“看起来还行”的截图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
