移动设备中的透明按钮和活动状态答案

【问题标题】：Transparent buttons and active states in a mobile移动设备中的透明按钮和活动状态
【发布时间】：2016-12-02 11:47:25
【问题描述】：

我做了一个透明按钮：

.home-btn-left {
  position: fixed;
  left: 20px;
  top: 20px;
  background-color: transparent;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

&lt;a class="home-btn-left" onclick="plusDivs(-1)"&gt;❮&lt;/a&gt;

它没有悬停、焦点或活动状态。但是当我把它推到我的 iPhone 上时，我看到了这个，我真的不想拥有它：

你有什么建议吗？

【问题讨论】：

请提供一个 jsfiddle：jsfiddle.net 在此处添加您的代码，以便人们可以看到正在发生的事情以及可以更改哪些内容以获得正确的结果。
是的，只需将您的代码添加到 jsfiddle.net 以便我们进行编辑
也许你应该将类名应用到按钮，因为它在 css-rules 中调用：<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>

标签： html css

【解决方案1】：

首先，您应该为<a> 元素的每个状态应用样式：

.home-btn-left,.home-btn-left:hover,
.home-btn-left:active, .home-btn-left:focus { /* your styles */ }

那么你应该添加 otline 属性，以防止虚线轮廓或类似行为

outline: 0;

编辑：在进行更多挖掘时，您可能正在搜索 -webkit-tap-highlight-color，如 here 所述

【讨论】：