为什么在移动设备上点击按钮时周围有黑色区域

Question

代码是：https://codesandbox.io/s/gatsby-starter-default-og782

我使用styled-component 将<a> 标签设置为我的按钮。

例如，

const CloseButton = styled.a`
  position: relative;
  font-size: 30px;
  top: 30vh;
`

我用<a>标签和transform: translateY(-3px);实现了悬停效果

  a {
    outline: none;
    font-size: ${fontSizes.medium};
    ${media.phablet` font-size: ${fontSizes.small};`}
    font-weight: 500;
    display: inline-block;
    text-decoration: none;
    text-decoration-skip-ink: auto;
    color: inherit;
    position: relative;
    transition: ${theme.transition};
    cursor: pointer;
  margin: 0 auto;
  padding: 7px;
    &:hover,
    &:focus
     {
    transform: translateY(-3px);
    }
    -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;    

  }

现在它在桌面上运行良好。但是当我在移动设备上查看时（你可以在这里尝试演示https://og782.sse.codesandbox.io/）

点击按钮时，按钮周围有一个黑暗区域

有人可以帮我摆脱这个吗？

Answer 1

这很可能是因为-webkit-tap-highlight-color

你可以尝试做一个透明的样式：

a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}