How to remove the blue highlight of button on mobile?

Question

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

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

• How to remove focus border (outline) around text/input boxes? (Chrome)
• Remove blue box around buttons. HTML
• How to remove the blue box shadow border in button if clicked
• How do I remove blue "selected" outline on buttons?
• How do I remove blue "selected" outline on buttons?
• Remove blue border from css custom-styled button in Chrome
• How to remove focus around buttons on click

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;" />

Answer 1

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

Answer 2

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

Test it.