전자의 부트 스트랩 버튼 주위의 주황색 초점 개요 비활성화

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

를, 이러한 요소들은 잘 렌더링 :

그러나

나는 이러한 요소 중 하나 초점을 맞출 때, 오렌지 개요는, 그것의 주위에 나타나는 내가 원하지 않는 :

는 전자 디버그에서 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; 
} 

나는 또한 전자 디버거에서 규칙을 사용하지 않도록 노력했습니다. 그러나이 중 어느 것도 작동하지 않았다 :

I 초점에 오렌지 윤곽 제거 할 수있는 방법이 있나요?

편집 @의 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 버튼에만 적용하는 것입니다. 과 같이 초점을 맞춘 경우

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

Answer 1

대상 클래스 glyphicon-button와 HTML 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; 
} 

하는 수 편집 2

는 다음 그러나이 작동하지 않습니다 시도 윤곽선 속성을 제거하면 consquences on accessibility이라는 것을 알고 있습니다.