隐藏在 iOS Safari 下按钮激活状态的背景颜色

各系浏览器存在着一个用于渲染按钮轻击 tap 时高亮颜色的事实标准（表现为按钮被点击时会有一个背景颜色）。

有时候我们并不需要这个背景颜色，或者不想使用默认的半透明黑色背景。我们可以通过定义 CSS 中的 -webkit-tap-highlight-color。

其具体语法如下：

-webkit-tap-highlight-color: <color value>

其中，<color value> 为可以表示颜色的值。

示例

HTML

<a id="test-anchor" href="javascript:;">Test Anchor</a>

SCSS

#test-anchor {
  -webkit-tap-highlight-color: rgba(red, 0.33);
}

最终效果

未标题-1.png

引用

• MDN
• MSDN
• Apple Developer