100

I try to remove the blue box that appears on click in front of buttons as you can see below: My button

Before asking, I have made a lot of research, I have tried the solutions given by the following topics:

I have tried all the answers! It works on computer but not on mobile.

If you are using a computer, you can try by simulating mobile with the inspector. Here is the button: https://jsfiddle.net/t4ykshst/

#add {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    outline: none;
    cursor: pointer;
    padding: 10px;
    overflow: hidden;
    border: none;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    background: #1abc9c;
    -webkit-box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
}

#add:active {
    opacity: 0.85;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
}
<input type="button" id="add" value="+" title="" style="position: absolute; left: 0px; top: 0px; width: 52px; height: 52px;" />
BarryCap
  • 168
  • 1
  • 11
Scoop Devek
  • 1,031
  • 2
  • 8
  • 6

6 Answers6

238

You can add:

-webkit-tap-highlight-color: transparent;

You can also add this to your stylesheets to define it globally: 

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Hope this helps :)

You can find the documentation here for more info: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5

Aslam
  • 7,851
  • 3
  • 33
  • 49
22
* {
    -webkit-tap-highlight-color: transparent;
}

Test it.

TOPKAT
  • 4,513
  • 2
  • 27
  • 55
mohamad sam mohamadi
  • 221
  • 2
  • 2
5

There will be no highlighting (at least in Chrome 88+) at all if you remove cursor: pointer from #add selector. And if you need it in the "desktop" mode, use something like this:

@media (min-width: 768px) {
    #add {
        cursor: pointer;
    }
}
Artur
  • 5,091
  • 2
  • 32
  • 26
  • 1
    There are many mobile screens larger than 768px, and it will not have any effect on those screens. – BarryCap Jun 08 '21 at 19:55
4

You just need to add style="-webkit-tap-highlight-color: transparent;"

srikar kandula
  • 41
  • 1
4

-webkit-tap-highlight-color is a non-standard feature (mdn). It won't work in browser like safari 14.

Instead, you can use

{ outline: none; }

or apply it specifically through selector

a:focus,a:visited,a:active{
  outline: none;
}
Steven.Chang
  • 85
  • 6
0

Try it

add to the button style "cursor: default;"

This will make a cursor:pointer; it turns into a "default", but will remove the blue shadow on the buttons on the mobile screen as you want

Dans
  • 9
  • 2