https://i.stack.imgur.com/7y46f.png
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); }
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
* {
-webkit-tap-highlight-color: transparent;
}
Test it.
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;
}
}
You just need to add style="-webkit-tap-highlight-color: transparent;"
-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;
}
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
In addition to all the answers here, you have to also specify the background css property explicitly yourself to the button.
Success story sharing