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

但是，我无法禁止这些规则。基于对类似问题的回答，例如 this and this，我尝试将以下规则添加到我的 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 调试器中的规则。但是，none 已经奏效了：

有什么方法可以去掉焦点上的橙色轮廓吗？

编辑

根据@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”-class 按钮。

编辑 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

使用 class 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;
}

请注意，删除轮廓属性有 consquences on accessibility。

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

Disabling orange focus outline around Bootstrap buttons in Electron

css

focus

jsx

twitter-bootstrap-3

electron