Почему автофокусировка оставляет пунктирную линию вокруг кнопки?

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; }