如何移除移动端设备上点击/长按链接按钮时出现的高亮选中框

问题本质 #

你观察到的点按/长按链接时出现的半透明高亮效果，不是你写的a:active样式规则触发的。这是iOS Safari、安卓移动端Chrome等WebKit/Blink内核浏览器，默认给所有可触控交互元素叠加的内置tap高亮层。
之前你误以为是自己的active规则自动追加了背景色，本质是系统高亮层在你自定义的active文字色生效时同步叠加显示，才会产生样式规则连带生效的错觉。桌面端因为没有触控交互逻辑，所以不会触发该效果。

分步修复配置 #

• 全局清除浏览器默认tap高亮效果
  给全站元素加全局重置规则，直接将系统默认的高亮透明度设为0，从根源去掉强制叠加的高亮层：

  * {
    -webkit-tap-highlight-color: transparent;
  }
  

  该规则不会覆盖你自定义的:active状态样式，只是移除浏览器强制叠加的默认高亮层。
• 补全现有a:active规则的漏项
  你当前的active规则仅设置了移除轮廓、修改文字颜色，没有覆盖浏览器可能追加的默认背景样式，可将规则补全为：

  a:active {
    outline: none;
    color: #fff;
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
  }
  

• 针对按钮形态的自定义链接补全防残留配置
  针对截图里的圆角按钮类链接，追加两个规则避免长按时的菜单弹层高亮残留、用户选中文本带来的样式异常：

  a {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
  }
  

效果校验 #

配置完成后，移动端点按链接时，就会完全按照自定义的a:active规则渲染白色文字，不会出现系统默认叠加的半透明灰色高亮层。

内容的提问来源于stack exchange，提问作者MMMamich