抑制 Bootstrap 可消除的弹出框边框突出显示

Question

单击 link（或按钮）以显示可关闭的弹出框时，被单击元素的边框会突出显示。 Bootstrap 文档中的 example 和我的页面实际上会发生这种情况。（仅供参考，我计划用图像替换我的文本“[i]”；我的假设是突出显示的元素是 href 而不是文本。）

Bootstrap 5 个 Docs Dismissible 弹出按钮

我的 DismissIble 弹出窗口

在 Bootstrap 文档示例中，单击按钮时将以下内容添加到元素中：

aria-describedby="popover808202"

我的代码

<div class="tile-title">
  Modified<span style="float:right;"><a tabindex="0" href="#" title="Help" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Descriptive and useful information can be displayed here.">[ i ]</a></span>
</div>

我的JavaScript

let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
let popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

想要的结果

我想取消突出显示。

Answer 1

事实证明这比我想象的要容易。

a:focus {
  outline: none;
  border-color: rgba(0,0,0,0);
  box-shadow: none;
}

此示例当然会为整个页面完全禁用锚点突出显示（对于使用上述 CSS 属性的所有锚点）。

抑制 Bootstrap 可消除的弹出框边框突出显示

Suppress Bootstrap Dismissable Popover Border Highlighting

css-selectors

bootstrap-5

bootstrap-popover

Bootstrap 5 个 Docs Dismissible 弹出按钮

我的 DismissIble 弹出窗口

我的代码

我的JavaScript

想要的结果