https://i.stack.imgur.com/7y46f.png
在问之前，我做了很多研究，我尝试了以下主题给出的解决方案：
如何删除文本/输入框周围的焦点边框（轮廓）？ （铬合金）
删除按钮周围的蓝色框。 HTML
如果单击，如何删除按钮中的蓝色框阴影边框
如何删除按钮上的蓝色“选定”轮廓？
如何删除按钮上的蓝色“选定”轮廓？
从 Chrome 中的 css 自定义样式按钮中删除蓝色边框
如何在单击时消除按钮周围的焦点
我已经尝试了所有的答案！它适用于计算机，但不适用于移动设备。
如果您使用的是计算机，您可以尝试通过检查器模拟移动设备。这是按钮：https://jsfiddle.net/t4ykshst/
#add { -webkit-box-sizing: 内容框； -moz-box-sizing：内容框； box-sizing: 内容框；大纲：无；光标：指针；填充：10px；溢出：隐藏；边框：无； -webkit-border-radius：50%；边界半径：50%；颜色：rgba(255, 255, 255, 0.9);文本对齐：居中；背景：#1abc9c； -webkit-box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);盒子阴影：0 4px 3px 2px rgba(0, 0, 0, 0.2); } #add:active { 不透明度：0.85; -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);盒子阴影：2px 2px 2px 0 rgba(0, 0, 0, 0.2); }
你可以加：
-webkit-tap-highlight-color: transparent;
您还可以将其添加到样式表中以全局定义它：
input,
textarea,
button,
select,
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
希望这可以帮助 ：）
* {
-webkit-tap-highlight-color: transparent;
}
测试一下。
如果您从 #add 选择器中删除 cursor: pointer，则根本不会突出显示（至少在 Chrome 88+ 中）。如果您在“桌面”模式下需要它，请使用以下内容：
@media (min-width: 768px) {
#add {
cursor: pointer;
}
}
您只需添加 style="-webkit-tap-highlight-color: transparent;"
-webkit-tap-highlight-color 是非标准功能 (mdn)。它不适用于像 safari 14 这样的浏览器。
相反，您可以使用
{ outline: none; }
或通过选择器专门应用它
a:focus,a:visited,a:active{
outline: none;
}
试试看
添加到按钮样式“光标：默认；”
这将创建一个光标：指针；它变成“默认”，但会根据需要删除移动屏幕上按钮上的蓝色阴影
除了此处的所有答案之外，您还必须自己为按钮明确指定背景 css 属性。
关注公众号
不定期副业成功案例分享
