禁用 Electron 中 Bootstrap 按钮周围的橙色焦点轮廓

Question

我正在尝试在 Electron （版本 1.6.2）中创建一个应用程序。在应用程序中，我有许多元素，我希望它们的行为类似于按钮，但显示为简单的字形。我使用以下 React 代码：

private static optionsFormatter () {
  return (
      <div className={`${styles.fieldGlyphiconContainer}`}>
        <Button className={`${styles.glyphiconButton} btn-link`}><Glyphicon glyph='edit'/></Button>
        <Button className={`${styles.glyphiconButton} btn-link`}><Glyphicon glyph='remove'/></Button>
      </div>
  );
}

在默认状态下，这些元素呈现良好：

然而，当我聚焦其中一个元素时，它周围会出现橙色轮廓，这是我不想要的：

查看 Electron 调试器中的 CSS 规则，看起来罪魁祸首是 Bootstrap CSS 文件中的以下内容：

private static optionsFormatter () {
  return (
      <div className={`${styles.fieldGlyphiconContainer}`}>
        <Button className={`${styles.glyphiconButton} btn-link`}><Glyphicon glyph='edit'/></Button>
        <Button className={`${styles.glyphiconButton} btn-link`}><Glyphicon glyph='remove'/></Button>
      </div>
  );
}

然而，我无法压制这些规则。根据对类似问题（例如this和this）的回答，我尝试将以下规则添加到我的CSS文件中：

.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

我还尝试禁用 Electron 调试器中的规则。然而，这一切都不起作用：

有什么办法可以消除焦点上的橙色轮廓吗？

编辑

根据 @ovokuro 的评论，我将 CSS 更改为：

.glyphicon-button {
  padding: 0;
  color: black;

  :focus,
  :active:focus,
  .active:focus,
  .focus,
  :active.focus,
  .active.focus {
    outline: none !important;
  }

}

button:focus,
button:active:focus,
button.active:focus,
button.focus,
button:active.focus,
button.active.focus {
  outline: none !important;
}

这似乎有效，尽管它全局修改了按钮焦点样式。下一步只是使其仅适用于“.glyphicon-button”类按钮。

编辑2

尝试了以下方法，但这不起作用：

button.glyphicon-button {
  button:focus,
  button:active:focus,
  button.active:focus,
  button.focus,
  button:active.focus,
  button.active.focus {
    outline: none !important;
  }
}

Answer 1

button当聚焦时，使用 class 来定位 HTML元素glyphicon-button，如下所示：

button.glyphicon-button:focus,
button.glyphicon-button:active:focus,
button.glyphicon-button.active:focus,
button.glyphicon-button.focus,
button.glyphicon-button:active.focus,
button.glyphicon-button.active.focus {
  outline: none !important;
}

请注意，删除大纲属性会对可访问性产生影响。