蓝色/灰白闪烁框是 WebKit 内核的独立 overlay，非 outline 或 :active 触发；须对可激活元素显式设置 -webkit-tap-highlight-color: transparent 并补 user-select: none 消除 iOS 15.4+ 残影。
为什么 outline: none 和 :active 都没用
那个蓝色/灰白闪烁框不是 outline，也不是 :active 伪类触发的样式，而是 WebKit 内核（iOS Safari、微信 X5 等）在 touchstart 瞬间绘制的一层独立 overlay。它不走 CSS 渲染流程，不受 border、box-shadow、opacity 影响，也不继承、不响应伪类选择器。
常见误操作包括：
-
a:active { -webkit-tap-highlight-color: transparent; }—— 伪类里写无效 -
* { -webkit-tap-highlight-color: transparent; }—— 全局写法在部分微信 X5 内核会白屏 - 只加
onclick的<div> 却没设 <code>role="button"和tabindex="0"—— 浏览器根本不把它当可激活元素，属性压根不生效必须显式作用于可激活元素的
-webkit-tap-highlight-color这个属性只对浏览器识别为“可点击且可聚焦”的元素起效，且必须直接写在目标元素上。推荐选择器组合：
-
a、button -
input[type="button"]、input[type="submit"] -
[role="button"][tabindex="0"]（自定义按钮必备） - 动态渲染场景下，
[onclick]可作为兜底，但不如语义化写法稳定
值只能是
transparent或rgba(0,0,0,0)；写成none、unset、rgba(255,255,255,0)全部无效。立即学习“前端免费学习笔记（深入）”；
示例写法：
a, button, input[type="button"], input[type="submit"], [role="button"][tabindex="0"] { -webkit-tap-highlight-color: transparent; }iOS 15.4+ 残留灰白闪烁？补上
user-select: none即使
-webkit-tap-highlight-color: transparent已生效，iOS 15.4+ 仍可能因默认文本可选行为触发重绘干扰，出现微弱灰白残影。这不是样式失效，而是系统级行为冲突。解决方案是叠加
user-select: none：- 对纯操作按钮（如图标按钮、切换开关），直接加
user-select: none - 若按钮内含需复制的内容（如电话号码、地址），不能整块禁用，应把可选文本用
<span class="selectable"></span>包裹，并单独设.selectable { user-select: text; }
注意：某些 Hybrid App 的老旧 WebView 中，还需同步清理
outline: none和border: none才能彻底干净。关掉高亮后用户点下去像没反应，怎么办
-webkit-tap-highlight-color是系统级瞬时反馈，关掉后不会自动给你补交互感。:active在 iOS 上持续时间仅 100–200ms，且有明显延迟，肉眼几乎不可见，不能当替代方案。必须主动添加视觉反馈：
- 缩放反馈：
:active { transform: scale(0.98); } - 背景色变化：
:active { background-color: #e9ecef; } - 如果是
<div> 模拟按钮，除了样式，还得确保有 <code>cursor: pointer和role="button"，否则屏幕阅读器可能跳过 - Vue/React 动态插入节点时，要确认新 DOM 同步携带
role和tabindex，否则高亮会重新出现
真机测试比模拟器重要得多——Android Chrome 62+ 已彻底忽略该属性，写了也白看；桌面 Chrome 的设备模拟器默认不触发 tap 行为，开发阶段完全看不到问题。
-
