如何去除手机上按钮的蓝色高亮? [英] How to remove the blue highlight of button on mobile?

问题描述

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

I try to remove the blue box that appears on click in front of buttons as you can see below:

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

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

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

所有的答案我都试过了！它适用于计算机，但不适用于移动设备.

I have tried all the answers! It works on computer but not on mobile.

如果你用的是电脑，可以用inspector模拟手机试试.这是按钮:https://jsfiddle.net/t4ykshst/

If you are using a computer, you can try by simulating mobile with the inspector. 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;" />

推荐答案

您可以添加:

-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);
}

希望这有帮助:)

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

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

这篇关于如何去除手机上按钮的蓝色高亮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！