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

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

尝试将CS​​S中的大纲属性设置为0或none。

示例：

:focus { outline: none; }