在移动设备上单击/点击时如何摆脱框？答案

【问题标题】：How to get rid of box when clicking/tapping on mobile devices?在移动设备上单击/点击时如何摆脱框？
【发布时间】：2021-05-01 18:16:35
【问题描述】：

我正试图摆脱一个仅在用户点击/按住链接（按钮）时出现在移动设备上的框。我注意到当我将活动状态颜色设置为我希望字体显示为设置背景颜色的颜色时。

a:active{outline: none; color: #fff;}

这是链接在移动设备上被点击前后的样子（在桌面上看起来不错）。

Button before it is clicked Button after it is tapped/held

【问题讨论】：

试试a { user-select: none; }。

标签： html css web mobile responsive-design

【解决方案1】：

在我看来，您只想删除移动设备的颜色属性。为了实现这一点，您可以在 css 中使用 @media only screen and (max-width: 600px) 属性，它将为所有具有 max-width 或 600px 的设备加载 css。在这里你可以找到更多关于https://www.w3schools.com/cssref/css3_pr_mediaquery.asp的信息

【讨论】：

如果我摆脱了颜色属性或通过媒体查询使颜色对移动设备透明，那么它可以工作并且该框不会出现，但字体也不会显示。不过感谢您的帮助！
为了能够回答我需要您提供更多代码。您可以做的是在浏览器中打开开发工具并检查桌面和移动设备的 css，然后进行您认为合适的更改。
感谢幻影先生！我最终只是使用媒体查询将活动链接的颜色更改为深蓝色。

【解决方案2】：

这是你要找的吗？

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

-webkit-focus-ring-color: rgba(255, 255, 255, 0);

请记住，这不适用于所有用户。

【讨论】：

我已经尝试过了，不幸的是，它并没有摆脱第二个链接中的那个白框:(不过谢谢！