如何去除手机上按钮的蓝色高亮？

Posted 2023-02-22

【中文标题】如何去除手机上按钮的蓝色高亮？

【英文标题】：How to remove the blue highlight of button on mobile?

【发布时间】：2017-12-16 10:06:00

【问题描述】：

我尝试删除点击按钮前出现的蓝色框，如下所示：

在问之前，我做了很多研究，我尝试了以下主题给出的解决方案：

How to remove focus 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 How do I remove blue "selected" outline on buttons? How do I remove blue "selected" outline on buttons? Remove blue border from css custom-styled button in Chrome How to remove focus around buttons on click

我已经尝试了所有的答案！它可以在计算机上运行，​​但不能在移动设备上运行。

如果您使用的是计算机，您可以尝试通过检查器模拟移动设备。这是按钮：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;" />

【问题讨论】：

jsfiddle.net/t4ykshst/3

你的例子对我来说很好。

【参考方案1】：

您可以添加：

-webkit-tap-highlight-color: transparent;

您也可以将其添加到样式表中以全局定义它：

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

希望这会有所帮助:)

您可以在此处找到文档以获取更多信息：https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5

【讨论】：

还有其他服务提供商的供应商前缀吗？这是标准化了吗？

拯救了我的一天！谢谢。

别忘了加 div :)

终于！这就是我要找的东西-谢谢

我知道我不应该这样评论，但这太棒了。谢谢。

【参考方案2】：

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

测试一下。

【参考方案3】：

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

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

【讨论】：

超过768px的手机屏幕很多，对这些屏幕没有任何影响。

【参考方案4】：

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

【参考方案5】：

-webkit-tap-highlight-color 是非标准功能 (mdn)。它不适用于 safari 14 等浏览器。

相反，您可以使用

 outline: none; 

或者通过选择器专门应用

a:focus,a:visited,a:active
  outline: none;

【参考方案6】：

试试看

添加到按钮样式“光标：默认；”

这将创建一个光标：指针；它变成“默认”，但会根据需要移除移动屏幕上按钮上的蓝色阴影