如何在触摸设备上删除此 css 点击效果？ [复制]

Question

我目前正在研究此导航菜单的样式。
它在浏览器上运行良好。至于手机，有这种奇怪的蓝色点击效果。 如何删除它？
屏幕截图：
点击之前https://imgur.com/Ovu5v7P
点击https://imgur.com/lOwpicT

这是我的代码：

React
import { Link, NavLink } from "react-router-dom";//these are just <a>

<div className="drawerNav" onClick={() => setDrawerOpen(false)}>
            <a className="closebtn">Close</a>
            <div className="drawerNav-content">
              <Link to="/">Home</Link>
              <Link to="/about">About</Link>
              <Link to="/post">Post</Link>
              <a onClick={handleAuth}>{signed ? "Logout" : "Login"}</a>
            </div>
</div>
CSS(styled components)
.drawerNav {
    a {
      padding: 8px;
      text-decoration: none;
      font-size: 36px;
      color: #fff;
      display: block;
    }
  }
  .drawerNav-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }

Answer 1

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

注意：您可以使其与您网站的主色相匹配。例如 - #591784

-webkit-tap-highlight-color: #591784;