为什么自动对焦会在按钮周围留下虚线？

Question

我有一个按钮组，我试图设置它的第一个按钮在页面加载时处于活动状态。我没有使用.active，因为当我按下其他按钮时，第一个按钮上的活动停留，然后我需要使用JS来更改按钮的状态。所以我使用自动对焦作为属性。喜欢这个。

<div id="resultOption" class="btn-group btn-group-lg" role="group" aria-label="..."> 
       <button type="button" class="btn btn-default" autofocus>Events</button> 
       <button type="button" class="btn btn-default">Hosts</button> 
       <button type="button" class="btn btn-default">Teachers</button> 
      </div> 

但是当我加载页面周围有按钮，一个奇怪的虚线这样

如果我点击按钮或其他按钮，它会消失，但它看起来不好，我不想要这个奇怪的虚线。

我使用的是IE 11

Answer 1

尝试在CSS中轮廓属性设置为0或none。

实施例：

:focus { outline: none; }