移动端灰色高亮是 WebKit 系统级 tap highlight，由 -webkit-tap-highlight-color 控制，需同时清除该样式与 Bootstrap 的焦点样式（如 box-shadow、outline），并为按钮补充 :active 反馈以保障可访问性。
移动端点击按钮出现灰色高亮是啥机制
这不是 Bootstrap 的样式，也不是 :active 伪类触发的——它是 WebKit 内核（iOS Safari、旧版 Android Chrome）在 touchstart 瞬间绘制的一层系统级 overlay，由 -webkit-tap-highlight-color 控制。Bootstrap 的 box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) 是另一层焦点反馈，两者叠加，看起来更“重”。只清一个，高亮还在。
必须同时处理两层：系统高亮 + Bootstrap 焦点样式
缺一不可，且要写在具体可点击元素上：
-
-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 触发 - 别用
outline: none单独扛——它对系统高亮完全无效；也别靠:active { background: #fff; }，生命周期太短，iOS 上基本不生效
真实设备上常失效？优先检查这三点
不是代码写错，而是环境或层级问题：
- 桌面 Chrome 设备模拟器默认不触发 tap 高亮，开发时根本看不到问题 → 必须在真机测：iOS Safari（尤其 iOS 17+）和 Android Chrome for Android 各跑一次
- Vue/React 动态插入的按钮（如
v-if切换出的.btn）不会自动继承父级样式 → 确保选择器能命中它们，比如用button.btn, [class*="btn"] - 用了
FastClick或touch-action: manipulation，高亮“消失”了，但这是事件流被拦截 → 掩盖了真实问题，反而不利于可访问性
关掉高亮后，用户点不动怎么办
灰色高亮本质是触控反馈。禁用后必须补足替代反馈，否则用户无法感知点击是否生效：
- 给
.btn加:active { background-color: #e9ecef; transform: scale(0.98); }（注意：iOS Safari 对:active有约 300ms 延迟，需配合touch-action: manipulation优化） - 若用
div模拟按钮，除了-webkit-tap-highlight-color，还得加cursor: pointer和role="button"，否则屏幕阅读器可能忽略 - 不要全局无差别禁用，比如
input[type="checkbox"]关掉高亮后，选中状态更难察觉
真正麻烦的是：你改完 CSS，在 iOS Safari 上看着没问题，但一进微信内置浏览器（X5 内核），transparent 可能被忽略——这时候得降级用 rgba(0,0,0,0.01)，而且必须单独给微信 UA 加规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
