在Electron

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和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调试器中的规则。但是，这些都没有奏效：

有什么方法可以摆脱焦点上的橙色轮廓？

修改

基于@ 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

在焦点如下的情况下，使用类sys.excepthook定位HTML button元素：

glyphicon-button

请注意，删除outline属性为consquences on accessibility。