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

Question

我正在尝试在Electron（版本1.6.2）中创建一个应用程序。在应用程序中，我有许多元素，我希望它们的行为像按钮一样，但显示为简单的Glyphicons。我使用以下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 文件中的以下内容：

.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;
}

然而，我无法抑制这些规则。根据类似问题的答案，例如此处和此处，我尝试将以下规则添加到我的CSS文件中：

.glyphicon-button {
  // ...

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

}

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

我还尝试在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;
  }
}

- Tagc

---

你尝试过只针对<button>进行定位吗？ - sol

@ovokuro 刚试了一下，不幸的是没有效果。 - Tagc

我的错误，目标是一个HTML类而不是一个按钮（".button"而不是"button"）。这样做似乎可以解决问题。 - Tagc

@ovokuro 谢谢。我已经更新了我的CSS并编辑了我的帖子。有没有办法我可以编辑它以仅针对具有特定类(.glyphicon-button)的按钮？更具体地说，我正在使用Sass（SCSS文件）而不是原始CSS。 - Tagc

你尝试过使用 button.glyphic-button:focus 吗？ - sol

@ovokuro 谢谢！这是我的 CSS，如果你想把它作为答案发布，我可以接受。https://pastebin.com/hWZDY1sL - Tagc

Answer 1

当聚焦时，针对具有类名为glyphicon-button的HTML 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;
}

请注意，删除outline属性会对可访问性产生影响。点击此处了解详情。

- sol