How to remove the blue highlight of button on mobile?
CssMobileCss Problem Overview
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:
- https://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome
- https://stackoverflow.com/questions/22746464/remove-blue-box-around-buttons-html
- https://stackoverflow.com/questions/24222798/how-to-remove-the-blue-box-shadow-border-in-button-if-clicked
- https://stackoverflow.com/questions/20593224/remove-blue-selected-outline-on-buttons/43773106#43773106
- https://stackoverflow.com/questions/20593224/remove-blue-selected-outline-on-buttons
- https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome
- https://stackoverflow.com/questions/19053181/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;" />
Css Solutions
Solution 1 - Css
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
Solution 2 - Css
* {
-webkit-tap-highlight-color: transparent;
}
Test it.
Solution 3 - Css
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;
}
}
Solution 4 - Css
You just need to add
style="-webkit-tap-highlight-color: transparent;"
Solution 5 - Css
-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;
}
Solution 6 - Css
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