Disabling orange focus outline around Bootstrap buttons in Electron

Question

I'm trying to create an application in Electron (version 1.6.2). Within the app I have a number of elements that I want to behave like buttons but display as simple Glyphicons. I use the following React code:

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

In their default state, these elements render fine:

However, when I focus one of these elements an orange outline appears around it, which I don't want:

Looking through the CSS rules in the Electron debugger, it looks like the culprit is this from the Bootstrap CSS file:

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

However, I'm not able to suppress these rules. Based on answers to similar questions such as this and this, I've tried adding the following rules to my CSS files:

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

I've also tried disabling the rules in the Electron debugger. However, none of this has worked:

Is there any way I can get rid of the orange outline on focus?

Edit

Based on @ovokuro's comment, I've changed my CSS to this:

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

This seems to work, although it globally modifies the button focus style. The next step is just to make this only apply to '.glyphicon-button'-class buttons.

Edit 2

Tried the following but this doesn't work:

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

My mistake, targeted an HTML class instead (".button" instead of "button"). Doing that seems to fix it. — Tagc, Apr 24 '17 at 08:36
@ovokuro Thanks. I've updated my CSS and edited my post. Is there a way I can edit it to target only buttons that have a particular class (.glyphicon-button)? More specifically I'm using Sass (SCSS files) rather than raw CSS. — Tagc, Apr 24 '17 at 08:44
@ovokuro Thanks! This is the CSS I've got if you want to post it as an answer that I can accept. https://pastebin.com/hWZDY1sL — Tagc, Apr 24 '17 at 08:56

score 5 · Accepted Answer · answered Apr 24 '17 at 09:01

Target the HTML button element with class glyphicon-button when focussed like so:

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

Be aware that removing the outline property has consquences on accessibility.

Disabling orange focus outline around Bootstrap buttons in Electron

1 Answers1