对于这个问题:

用这个:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

结果:

为了获得更好的结果，不要忘记!important声明

button:focus {outline:0 !important;}

具有!important属性的规则将始终被应用，无论该规则出现在CSS文档中的哪个位置。

在这个问题的实例中，我必须指定box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

如果您使用Bootstrap 4.1或其他版本，大多数解决方案将无法工作。在敲了很多脑袋之后，我发现你需要应用无影课程:

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

解决可访问性问题的另一种方法是通过一点Javascript。感谢来自hackernoon的这篇深刻的博客文章:https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

这里的方法非常简单而有效:当人们开始使用tab键导航页面时添加一个类(当再次切换到鼠标时可选地删除它)。然后，您可以使用这个类来显示或不显示焦点轮廓。

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

要删除蓝色背景的水龙头，我使用

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