How to remove the blue background of button on mobile?

问题

I try to remove the blue background of my button on click as you can see : Before asking, I have serached a lot, I have checked and tried the solutions given by the followings topics :

How to remove 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
Remove blue "selected" outline on buttons
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 PC but not on mobile, if you are on PC, you can try it by simulating mobile with your console. 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;">

回答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

回答2:

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

Test it.

来源：https://stackoverflow.com/questions/45049873/how-to-remove-the-blue-background-of-button-on-mobile

标签

css

mobile