Bootstrap v5+默认用:focus-visible替代:focus，鼠标点击不触发是故意的可访问性设计；应优先覆盖--bs-form-control-focus-box-shadow变量并使用.form-control:focus-visible，兼顾可访问性与视觉效果。

focus伪类在Bootstrap表单中为什么没反应

因为Bootstrap（尤其是v5+）默认用 :focus-visible 替代了 :focus，且对 input、select 等控件加了 outline: 0 和自定义 box-shadow。直接写 :focus { box-shadow: ... } 很可能被覆盖或不触发。

• 检查是否启用了 prefers-reduced-motion，它会让部分焦点样式降级
• 确保你的CSS规则优先级高于Bootstrap的 .form-control:focus（比如加 !important 或用更具体的选择器）
• Bootstrap v5.3+ 默认只对键盘聚焦生效 :focus-visible，鼠标点击不会触发——这是故意的可访问性设计，不是bug

怎么安全覆盖Bootstrap的focus阴影

推荐用Bootstrap自带的CSS变量 + 重写 :focus-visible，而不是暴力清空所有原生样式。这样既保留可访问性，又可控美观。

• 用 .form-control:focus-visible 而不是 .form-control:focus
• 通过 --bs-form-control-focus-box-shadow 变量注入新阴影：

  .form-control:focus-visible {
    --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }

• 如需鼠标点击也生效，可补充 .form-control:focus，但要加 !important 并注意屏幕阅读器体验

阴影颜色和尺寸怎么选才不突兀

别直接套用品牌色硬加粗阴影。Bootstrap默认用 rgba(13, 110, 253, 0.25)（即 primary 的弱化版），这是经过对比度和视觉权重平衡的结果。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 阴影扩散半径建议保持 0.25rem，太大显得浮肿，太小看不出效果
• 避免用纯黑/纯白阴影：box-shadow: 0 0 0 0.25rem #000 会破坏表单层级感
• 深色模式下记得同步覆盖 --bs-form-control-focus-box-shadow 变量，否则阴影可能不可见

自定义控件（如switch、file input）怎么加focus效果

这些控件原生不支持 :focus-visible 或渲染逻辑特殊，得靠包裹元素或伪元素模拟。

立即学习“前端免费学习笔记（深入）”；

• .form-check-input:focus-visible + .form-check-label 可给checkbox/radio的label加边框或背景
• file input 的 <input type="file"> 本身不可见，需作用于其父容器（如 .input-group）并监听子元素聚焦
• 第三方组件（如Select2、Flatpickr）要查文档看是否暴露 focused class，别硬塞 :focus

实际项目里最常漏的是深色模式适配和键盘聚焦与鼠标聚焦的行为差异——这两处一错，用户要么看不见焦点，要么觉得交互不一致。