css 如何去除移动的上按钮的蓝色高亮？

au9on6nz 于 2022-12-27 发布在其他

关注(0)|答案(7)|浏览(227)

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

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

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?
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;" />

css

来源：https://stackoverflow.com/questions/45049873/how-to-remove-the-blue-highlight-of-button-on-mobile

7条答案

按热度按时间

oxcyiej71#

您可以添加：

-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

赞(0）回复(0）举报 2022-12-27

cld4siwp2#

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

测试一下。

赞(0）回复(0）举报 2022-12-27

wz1wpwve3#

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

赞(0）回复(0）举报 2022-12-27

f1tvaqid4#

如果你从#add选择器中删除cursor: pointer，将不会有高亮显示（至少在Chrome 88+中是这样）。如果你需要在“桌面”模式下使用它，可以这样做：

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

赞(0）回复(0）举报 2022-12-27

bt1cpqcv5#

-webkit-tap-highlight-color是一个非标准功能（mdn）。它在safari 14这样的浏览器中不起作用。
相反，您可以使用

{ outline: none; }

或通过选择器专门应用

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

赞(0）回复(0）举报 2022-12-27

xeufq47z6#

试试看
添加到按钮样式"光标：违约;"
这将使光标：指针;它会变成"默认"，但会根据你的需要删除移动屏幕上按钮上的蓝色阴影

赞(0）回复(0）举报 2022-12-27

dfty9e197#

除了这里的所有答案之外，您还必须自己为按钮显式地指定background css属性。

赞(0）回复(0）举报 2022-12-27

我来回答

css 如何去除移动的上按钮的蓝色高亮？

7条答案

相关问题

热门标签

最新问答