如何删除手机上按钮的蓝色背景？

Question

我尝试在点击时删除按钮的蓝色背景,如您所见: 在询问之前,我已经进行了大量的研究,我已经检查并尝试了以下主题给出的解决方案:

• 如何删除文本/输入框周围的边框(轮廓)？(铬)
• 删除按钮周围的蓝色框.HTML
• 如果单击按钮,如何删除按钮中的蓝色框阴影边框
• 删除按钮上的蓝色"选定"轮廓
• 删除按钮上的蓝色"选定"轮廓
• 从Chrome中的css自定义样式按钮中删除蓝色边框
• 如何在点击按钮周围移除焦点
• ...

我已经尝试了所有的答案!它适用于PC但不适用于移动设备,如果您使用的是PC,则可以通过使用控制台模拟移动设备来尝试.这是按钮: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

你可以加:

-webkit-tap-highlight-color: transparent;

您还可以将其添加到样式表以全局定义它:

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

希望这可以帮助 :)

Answer 2

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

测试一下。

Answer 3

你只需要添加 style="-webkit-tap-highlight-color: transparent;"

Answer 4

cursor: pointer如果从选择器中删除，则根本不会突出显示（至少在 Chrome 88+ 中）#add。如果您需要在“桌面”模式下使用它，请使用如下内容：

@media (min-width: 768px) {
    #add {
        cursor: pointer;
    }
}