How can I remove this css click effect on touch devices?

Question

I'm currently working on the styles of this nav menu.
It works fine on browsers. As for phones, there is this weird blue onclick effect. How can I remove it?
Screen Shots:
Before clicking https://i.stack.imgur.com/fugWg.jpg
On clicking https://i.stack.imgur.com/AmOEU.jpg

Heres my code:

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;
  }

https://jsfiddle.net/t4ykshst/3/ Here is the jsFiddle mentioned on https://stackoverflow.com/questions/45049873/how-to-remove-the-blue-highlight-of-button-on-mobile . Please see if it resolves your issue — Sayyed Dawood, Dec 14 '21 at 14:49

score 6 · Answer 1 · answered Dec 14 '21 at 14:49

6

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

Note: you can make this match your website's main color. For example - #591784

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

answered Dec 14 '21 at 14:49

Nice18

476
2
12

Thanks a lot sir. I didn't know there was a name for this (like hover etc.) . – Sam Kondori Dec 14 '21 at 14:53

How can I remove this css click effect on touch devices?

1 Answers1