如何取消Bootstrap可关闭弹出框(Popover)触发元素的边框高亮效果

你遇到的高亮效果是元素处于聚焦状态时的默认样式，和aria-describedby属性无关：因为你配置了Popover的触发条件为focus，点击唤起Popover后，触发元素会一直保持聚焦状态，直到点击页面其他位置关闭Popover才会失焦，所以浏览器默认的focus轮廓、Bootstrap内置的focus高亮样式会持续显示。

解决方案 #

方案1：全局覆盖Popover触发元素的聚焦样式 #

直接在自定义CSS中添加如下规则，即可去掉所有Popover触发元素的聚焦高亮：

[data-bs-toggle="popover"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

如果你的触发元素是Bootstrap的.btn按钮，可以额外添加规则覆盖按钮的聚焦样式：

[data-bs-toggle="popover"].btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

方案2：针对单个元素添加样式（更推荐） #

如果不需要全局生效，可以给你的触发元素添加自定义类，比如no-popover-focus：

<a tabindex="0" href="#" class="no-popover-focus" title="Help" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Descriptive and useful information can be displayed here.">[ i ]</a>

再添加对应的CSS规则即可，这种方案优先级更高，不需要加!important也能生效，不会影响其他元素的聚焦样式：

.no-popover-focus:focus {
  outline: none;
  box-shadow: none;
}

提示：如果你的网站需要适配无障碍访问，不建议完全删除聚焦样式，可以根据页面设计调整聚焦样式的颜色、粗细，做到既不影响视觉效果，也能让键盘导航用户识别出当前聚焦位置。

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