How to remove the blue background of button on mobile? : <p>I try to remove the blue background of my button on click as you can see :
<a href="https://i.stack.imgur.com/EFS0T.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EFS0T.png" alt="My button"></a>
Before asking, I have serached a lot, I have checked and tried the solutions given by the followings topics :</p>

<ul>
<li><a href="https://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome">How to remove border (outline) around text/input boxes? (Chrome)</a></li>
<li><a href="https://stackoverflow.com/questions/22746464/remove-blue-box-around-buttons-html">Remove blue box around buttons. HTML</a></li>
<li><a href="https://stackoverflow.com/questions/24222798/how-to-remove-the-blue-box-shadow-border-in-button-if-clicked">How to remove the blue box shadow border in button if clicked</a></li>
<li><a href="https://stackoverflow.com/questions/20593224/remove-blue-selected-outline-on-buttons/43773106#43773106">Remove blue &quot;selected&quot; outline on buttons</a></li>
<li><a href="https://stackoverflow.com/questions/20593224/remove-blue-selected-outline-on-buttons">Remove blue &quot;selected&quot; outline on buttons</a></li>
<li><a href="https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome">Remove blue border from css custom-styled button in Chrome</a></li>
<li><a href="https://stackoverflow.com/questions/19053181/how-to-remove-focus-around-buttons-on-click">How to remove focus around buttons on click</a></li>
<li>...</li>
</ul>

<p>I have tried all the answers !
It works on PC but not on mobile, if you are on PC, you can try it by simulating mobile with your console.
Here is the button :
<a href="https://jsfiddle.net/t4ykshst/" rel="noreferrer">https://jsfiddle.net/t4ykshst/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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) ;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="button" id="add" value="+" title="" style="position: absolute; left: 0px; top: 0px; width: 52px; height: 52px;"&gt;</code></pre>
</div>
</div>
</p>
