ElectronのBootstrapボタンの周りのオレンジ色のフォーカスアウトラインを無効にする

Question

Electron（バージョン1.6.2）でアプリケーションを作成しようとしています。アプリケーション内には、ボタンのように振る舞いたいが、単純なグリフィコンとして表示したい要素がいくつかあります。私が反応次のコードを使用し、デフォルトの状態では

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

を、これらの要素は細かいレンダリング：

しかし

私は、これらの要素の1焦点を当てたときに、オレンジ色のアウトラインは、その周りに表示されます私はしたくない：

電子デバッグにおけるCSSルールを通じて探し

GERは、それは犯人がブートストラップ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; 
} 

私も電子デバッガでルールを無効にすることを試みました。しかし、これのどれも働いていない：

は、私が焦点上のオレンジ色のアウトラインを取り除くことができます方法はありますか？

編集

@の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ボタンにのみ適用することです。クラスglyphicon-buttonとHTML button要素そうのように焦点を当て

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

Answer 1

対象：

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

はしてを

編集2

は、次のことをしようとしましたが、これは動作しません。アウトラインプロパティの削除にはconsquences on accessibilityが含まれていることに注意してください。