如何仅在选项卡上设置元素的轮廓，而不在单击时设置？

<div class="tab">
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">Tab 1</label>
  
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">Tab 2</label>
  
  <input type="radio" id="tab3" name="tabs">
  <label for="tab3">Tab 3</label>
  
  <div class="tab-content">
    <p>Content for Tab 1</p>
  </div>
  
  <div class="tab-content">
    <p>Content for Tab 2</p>
  </div>
  
  <div class="tab-content">
    <p>Content for Tab 3</p>
  </div>
</div>

.tab-content {
  display: none;
}

input[type="radio"]:checked + label {
  outline: 2px solid blue;
}

input[type="radio"]:focus + label {
  outline: none;
}