Disabling orange focus outline around Bootstrap buttons in Electron - css

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

Answer 1

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.