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

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 中的 outline 属性设置为 0 或 none。

示例：

:focus { outline: none; }