禁用電子引導按鈕周圍的橙色焦點輪廓

我正嘗試在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> 
); 
}

在其默認狀態下，這些要素精細渲染：

然而，當我專注這些元素之一出現橙色輪廓周圍，這我不想：

翻翻在電子調試CSS規則蒙古包，它看起來像罪魁禍首就是這起引導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按鈕。

編輯2

試過以下，但這不起作用：

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

來源

2017-04-24 Tagc

你試過只瞄準'

@ovokuro剛剛嘗試 - 不幸的是沒有效果。 – Tagc

我的錯誤，改爲針對HTML類（「。按鈕」而不是「按鈕」）。這樣做似乎解決了它。 – Tagc

目標的HTML元素button與glyphicon-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。

來源

2017-04-24 09:01:03 sol

禁用電子引導按鈕周圍的橙色焦點輪廓

回答

相關問題