Mac OS Safari手风琴图标出现异常灰色方框问题求助

问题说明 #

有用户反馈在Mac OS系统的Safari浏览器（User Agent：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Safari/605.1.15）中，手风琴的加号图标周围出现奇怪的灰色方框，但伪造该UA后无法复现此问题。

相关代码 #

HTML代码 #

<div class="ac-item">
   <h3 class="ac-head" id="headingOne">
      What is SOLINO?
      <span class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      <i class="fa-solid fa-plus fa-xs"></i>
      </span>
   </h3>
   <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionfaq">
      <div class="ac-body">
         <p>SOLINO is a NFT-driven website offering fun and entertaining minigames with high RTP rates. All profits (100%) from the minigames are shared between the holders of the SOLINO NFTs.</p>
         <p>Link to SOLINO NFTs: coming soon.</p>
      </div>
   </div>
</div>

注：原HTML中<i>标签存在多余引号，已修正为格式正确的写法

CSS代码 #

.home-faq .accordion .ac-item {
  position: relative;
}
.home-faq .accordion .ac-head {
  border-top: 2px solid #fff;
  padding: 22px;
  padding-right: 50px;
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 0;
  position: static;
}
.home-faq .accordion .ac-head .btn {
  position: absolute;
  right: 12px;
  top: 10px;
  background: none;
  font-weight: 400;
  font-size: 40px;
  color: #fff;
  border: none;
  font-weight: 100;
  line-height: 1;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
}
.home-faq .accordion .ac-head .btn[aria-expanded=true] {
  top: 50%;
  margin-top: -20px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.home-faq .accordion .ac-body {
  font-size: 16px;
  font-weight: 400;
  padding-left: 22px;
  padding-right: 85px;
  color: #D6D6D6;
}

问题原因 #

这个灰色方框是Safari对可交互元素默认添加的焦点轮廓样式。因为<span class="btn">设置了type="button"，被浏览器识别为可点击的交互元素，当元素获得焦点时，Safari会显示默认的灰色焦点框。

解决方法 #

方法1：移除默认焦点轮廓 #

在.btn的CSS规则中添加outline: none;，覆盖Safari的默认样式：

.home-faq .accordion .ac-head .btn {
  /* 保留原有样式 */
  outline: none;
}

方法2：自定义焦点样式（兼顾可访问性） #

如果需要保证键盘导航的可访问性，建议自定义焦点样式而非完全移除：

.home-faq .accordion .ac-head .btn:focus {
  outline: 2px solid #你的自定义颜色;
  outline-offset: 2px;
}

内容的提问来源于stack exchange，提问作者lushythedev