我在一个有点击事件的div上经历了这一点，在20次搜索之后，我发现这个片段挽救了我的一天。

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

这将禁用webkit移动浏览器中的默认按钮高亮显示

当然!你也可以使用*从所有HTML元素中删除蓝色边框

*{
    outline-color: transparent;
    outline-style: none;
  }

And

 *{
     outline: none;   
   }

<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>

这种效果也会发生在非输入元素上。我发现下面是一个更通用的解决方案

:focus {
  outline-color: transparent;
  outline-style: none;
}

更新:您可能不必使用:focus选择器。如果你有一个元素，说<div id="mydiv">stuff</div>，你得到了这个div元素的外部发光，就像正常应用:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

这个解决方案对我很有效。

input:focus {
    outline: none !important;
    box-shadow: none !important;
}

这是为那些关心可访问性的人提供的解决方案。

请不要使用outline:none;用于禁用焦点轮廓。如果你这样做，你是在扼杀网络的可访问性。有一种可行的方法。

看看我写的这篇文章，它解释了如何以一种可访问的方式删除边界。

简而言之，当我们检测到键盘用户时，只显示轮廓边框。一旦用户开始使用他的鼠标，我们禁用大纲。结果你得到了两者中最好的。