移动端点击高亮框是iOS及部分Android浏览器中手指点击按钮或链接时出现的半透明灰色轮廓，属默认可访问性反馈；可通过-webkit-tap-highlight-color: transparent彻底关闭，但需同步补充:active样式及语义化属性以保障可用性与可访问性。
移动端点击高亮框是什么东西
就是 iOS 和部分 Android 浏览器里，手指点一下按钮或链接时，周围闪一下的半透明灰色轮廓。它不是 bug，是浏览器默认的可访问性反馈，但视觉上常被当作“丑”或“干扰”。-webkit-tap-highlight-color 是唯一能直接关掉它的 CSS 属性。
怎么彻底去掉点击高亮
在全局样式或目标元素上加这条规则就行：
button, a, input, textarea {
-webkit-tap-highlight-color: transparent;
}
-
transparent是最稳妥的取值；用rgba(0,0,0,0)或none在某些旧版 Safari 里会失效 - 必须写
-webkit-前缀，标准属性tap-highlight-color还没被任何浏览器支持 - 只对「可点击区域」生效：比如
div加了onclick或role="button"，也得单独加这条规则
为什么有时候加了也不管用
常见三个原因：
- 样式被更具体的 CSS 覆盖了——检查开发者工具里该属性是否被 strikethrough，提高选择器权重或加
!important（不推荐，优先改选择器） - 目标元素有
user-select: none且没配-webkit-tap-highlight-color，iOS 下可能保留默认高亮 - 在微信内置浏览器（X5 内核）里，部分版本对
transparent支持不稳定，可降级为rgba(0,0,0,0.01)试试
关掉之后要注意什么
高亮框本质是触控反馈。关掉后，用户点下去没视觉响应，容易误判是否点中：
立即学习“前端免费学习笔记（深入）”；
- 务必给按钮类元素加
:active样式，比如background-color: #eee或缩放transform: scale(0.98) - 如果用
div模拟按钮，除了-webkit-tap-highlight-color，还得加cursor: pointer和role="button"，否则屏幕阅读器可能忽略 - 不要全局无差别设
transparent，比如表单里的input[type="checkbox"]，关掉高亮反而让选中状态更难察觉
真正麻烦的从来不是加一行 CSS，而是关掉系统反馈后，你得自己把反馈做全、做对、做可访问。
