爲什麼自動對焦會在按鈕周圍留下虛線？

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