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

Question

我做了一个透明按钮：

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

<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>

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

你有什么建议吗？

https://jsfiddle.net/3bfptxty/

Answer 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

一样