Bootstrap 5 的 .navbar-toggler 按钮点击视觉反馈由 :active 和 :focus 伪类控制，非 JS 添加 class；:active 响应鼠标按下或触屏 touchstart，:focus 响应键盘聚焦后回车/空格触发。
直接改 .navbar-toggler 的 :active 和 :focus 伪类就行，别动 JS，也别找 .active 类——它根本不存在。
点击反馈由什么控制？
Bootstrap 5 的 .navbar-toggler 按钮点击时的视觉变化（比如背景微调、边框变色、图标轻微位移）完全靠 CSS 伪类驱动：:active 响应鼠标按下或触屏 touchstart，:focus 响应键盘 Tab 聚焦后回车/空格触发。它不依赖 JS 添加任何 class，也不受 .show 或 .collapsed 影响——那些是给 .navbar-collapse 用的。
常见错误现象：
- 在控制台反复检查
.navbar-toggler元素，想找.active类——白找 - 写 JS 监听 click 再手动加 class——破坏原生
:active的瞬时性，且无法响应键盘操作 - 只改
background-color，但用了自定义 SVG 图标，颜色没联动——视觉反馈不统一
怎么安全覆盖默认样式？
必须用足够高优先级的选择器重写伪类规则，否则会被 Bootstrap 默认样式覆盖。同时注意移动端真机行为差异。
- 推荐选择器：
nav.navbar .navbar-toggler:active或.navbar .navbar-toggler:focus，确保父元素有.navbar类，CSS 变量才能生效 - 别只改背景：如果用了
--bs-navbar-toggler-icon-bg自定义 SVG，建议同步加filter: brightness(0.9)或opacity: 0.85实现整体反馈 - 移动端真机测试时，
:active可能因 300ms 延迟或 fastclick 冲突失效，加nav.navbar .navbar-toggler { -webkit-tap-highlight-color: transparent; }消除高亮干扰 - 想让按住不放时持续反馈？只能靠
:active + transition配合，JS 模拟做不到原生效果
为什么改了没反应？
最常被忽略的两点：一是父容器没套 .navbar，导致 CSS 变量未定义；二是没处理 SVG 图标自身的颜色和尺寸适配。
-
.navbar-toggler-icon是通过background-image渲染 SVG 的，如果你覆盖了--bs-navbar-toggler-icon-bg变量，确保 URL 编码正确（比如#333要写成%23333） - 如果用了外部 SVG 文件（如
url("/icons/menu.svg")），要额外设background-repeat: no-repeat和background-position: 50%，否则可能偏移或重复 - 自定义图标宽高不匹配原始
1em × 1em尺寸时，.navbar-toggler的padding会把图标挤变形，需同步调整.navbar-toggler-icon的width和height
真正麻烦的不是写几行 CSS，而是改完后得在真机上测触控响应是否跟手、键盘聚焦是否可见、SVG 图标在不同缩放比例下是否清晰——这些细节不报错，但用户一摸就感知得到。
