如何移除手机按钮的蓝色高光？

我试图删除出现在点击按钮前面的蓝色框，你可以看到如下: My button

Before asking, I have made a lot of research, I have tried the solutions given by the following topics:

我已经试过所有的答案! 它可以在电脑上工作，但不能在手机上。

如果你正在使用电脑，你可以试着和检查员一起模拟手机。这里有一个按钮: 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;" />

66498 次浏览
小开
最佳答案

You can add:

-webkit-tap-highlight-color: transparent;

您还可以将其添加到样式表中，以便在全局范围内定义它:

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

Hope this helps :)

你可以在这里找到更多信息的文档: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5

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

测试一下。

小开

如果从 #add选择器中删除 cursor: pointer，那么就不会有高亮显示(至少在 Chrome88 + 中)。如果你需要在“桌面”模式下使用，可以这样做:

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

You just need to add style="-webkit-tap-highlight-color: transparent;"

小开

-webkit-tap-highlight-color是一个非标准的特性(我不知道) ，它不能像 Safari 14那样在浏览器中工作。

相反，你可以使用

{ outline: none; }

或者专门通过选择器应用它

a:focus,a:visited,a:active{
outline: none;
}
小开

Try it

add to the button style "cursor: default;"

这将创建一个光标: 指针; 它将变成一个“默认”，但是将移除手机屏幕上按钮上的蓝色阴影

小开

In addition to all the answers here, you have to also specify the background css property explicitly yourself to the button.


提交答案