如何删除手机上按钮的蓝色突出显示？

Question

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

• 如何删除文本/输入框周围的焦点边框（轮廓）？（Chrome）
• 删除按钮周围的蓝色框。超文本标记语言
• 如果单击，如何删除按钮中的蓝色框阴影边框
• 如何删除按钮上的蓝色“选定”轮廓？
• 如何删除按钮上的蓝色“选定”轮廓？
• 删除蓝色边框从css自定义样式按钮在Chrome
• 如何删除点击按钮周围的焦点

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

如果您使用的是计算机，您可以尝试使用inspector模拟移动设备。这是按钮：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

如果从#add选择器中删除光标：指针，则将不会突出显示（至少在Chrome 88中是这样）。如果您需要在“桌面”模式下使用它，请使用以下内容：

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

Answer 2

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

测试一下。

Answer 3

您可以添加：

-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