移动端点击Bootstrap按钮出现蓝灰高亮是WebKit系统高亮与Bootstrap焦点样式双重叠加所致，需同时禁用-webkit-tap-highlight-color和清除:focus/:active/active类的outline与box-shadow，并补足可访问的点击反馈。
移动端点击Bootstrap按钮出现蓝灰高亮是两个独立机制叠加的结果
真机上点一下 .btn，看到的“蓝灰块”不是单一问题：一层来自浏览器内核（WebKit）在 touchstart 瞬间绘制的系统级 overlay，由 -webkit-tap-highlight-color 控制；另一层来自 Bootstrap 自己的焦点样式，主要是 box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)。只清掉其中一个，高亮照旧存在。
必须同时禁用 -webkit-tap-highlight-color 和 focus/active 样式
缺一不可，且要作用在具体可点击元素上：
-
-webkit-tap-highlight-color: transparent必须写在button、.btn、[role="button"]、[onclick]这类元素上；不能写* { -webkit-tap-highlight-color: transparent; }，某些旧版微信 X5 WebView 会白屏 -
.btn:focus, .btn:active:focus, .btn.active:focus要显式清除outline和box-shadow；只写:focus不够，因为 Bootstrap 的激活态可能通过.activeclass 触发 - 不要依赖
:active { background: #fff; }或outline: none单独处理——前者生命周期太短，后者对系统高亮完全无效
为什么加了 CSS 还是有高亮？优先检查这三点
失效几乎从不因为代码写错，而是环境或层级问题：
- 页面缺少
<meta name="viewport" content="width=device-width, initial-scale=1">—— 浏览器没启用移动端渲染模式，-webkit-tap-highlight-color直接不参与计算 - 目标按钮被
pointer-events: none的父容器包裹，或父级用了will-change: transform，部分 iOS 版本会跳过高亮层绘制 - Vue/React 动态插入的按钮（比如
v-if切换出来、useState渲染后）没命中你写的全局选择器，得确认 computed styles 里该属性是否真实生效（不是 strikethrough 状态）
禁用后必须补上可访问的点击反馈
关掉系统高亮不等于可以不管用户感知：
立即学习“前端免费学习笔记（深入）”；
- 给
.btn:active加轻量反馈，比如transform: scale(0.98)或background-color: #e9ecef，否则用户点下去毫无响应感 - 如果用
div模拟按钮，除了-webkit-tap-highlight-color: transparent，还得加cursor: pointer和role="button"，否则屏幕阅读器可能忽略 - 别全局无差别禁用——比如
input[type="checkbox"]关掉高亮后，选中状态更难察觉，反而损害可用性
真正麻烦的从来不是加一行 CSS，而是关掉系统反馈后，你得自己把反馈做全、做对、做可访问。
