클릭시 버튼 주위의 초점을 제거하는 방법

225

버튼을 클릭하면 내 버튼이 모두 강조 표시됩니다. 이것은 Chrome에 있습니다.

선택하지 않은 선택된

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

나는 주제와 함께 부트 스트랩을 사용하고 있지만 그것이 사실이 아니라고 확신합니다. 다른 프로젝트에서 전에 이것을 알았습니다.

<a>대신 태그를 사용하면 사라집니다 <button>. 왜? <button>어떻게 사용 하고 싶 습니까?

html  css  twitter-bootstrap 
— 숀 클라크 헤스
소스
12
개요 : 0; 당신은에 관심이있을 것이다
— Wiggler Jtag
클릭 후 수업이 추가됩니까?
— Kuzgun
1
개요 : 0은 도움이되지 않으며 웹킷 모양도 아닙니다
— Sean Clark Hess
7
이 문제를 해결하기위한 여러 가지 방법을 제안하는 모든 답변 28 개는 오늘날 프런트 엔드 웹 개발의 미안한 상태에 대한 증거입니다.
— 델타 닌
3
이 접근성 기능을 문제로 생각하는 사람들은 오늘날 프런트 엔드 웹 개발의 미안한 상태에 대한 증거입니다.
— Quentin

답변:

292

다른 페이지 에서이 Q와 A를 찾았고 버튼 포커스 스타일을 재정의하면 나에게 도움이되었습니다. 이 문제는 Chrome을 사용하는 MacOS에만 해당 될 수 있습니다.

.btn:focus {
  outline: none;
  box-shadow: none;
}

이것은 접근성에 영향을 미치며 버튼과 입력에 대해 일관된 초점 상태가 될 때까지 권장되지 않습니다. 아래 의견에 따르면, 마우스를 사용할 수없는 사용자가 있습니다.

— 예레미아 797
소스
33
나도 이것을 생각했지만 개요를 제거하지 않으면 접근성 문제가 있습니까?
— silvenon
10
다른 선택의 여지가없는 것 같아 .btn:active:focus선택기를 추가 하여 활성 상태에서도 제거 할 수도 있습니다 .
— silvenon
45
버튼에서 외곽선을 제거하면 접근성이 나빠질 수 있습니다. 마우스를 제어 할 수없고 키보드로 페이지를 탭할 수 있어야하는 사용자가 있습니다. 윤곽선을 제거하면 매우 어려워집니다. 버튼이 클릭에 집중하지 못하게하는 것이 좋습니다.
— Murphy Randle
미래의 여행자를 위해이 코드는 기본 단추 (모든 단추가 아님)의 모든 단추 상태에있는 모든 스타일을 완전히 대체합니다. .btn-default, .btn-default:hover, .btn-default:active, .btn-default:active:focus, .btn-default:visited, .btn-default:focus { color: #dcdcdc; background-color: #232323; outline: none; }
— Geordie
1
내장 부트 스트랩 변수를 사용하는 경우이 두 변수를 다음과 같이 설정하여이를 달성 할 수 있습니다. $ btn-focus-width : 0; $ btn-focus-box-shadow : 없음;
— bullettrain
109

당신은 다음과 같은 것을 원합니다 :

<button class="btn btn-primary btn-block" onclick="this.blur();">...

.blur () 메서드는 포커스 강조 표시를 올바르게 제거하고 Bootstraps 스타일을 손상시키지 않습니다.

— cshotton
소스
9
이것은 여전히 ​​잠깐 동안의 개요를 보여줍니다. 그것은 여전히 ​​그것을
— 망칩니다
2
클릭 이벤트 대신 포커스 이벤트를 트리거하면 깜박임이 표시되지 않습니다.
— Charles
2
이것은 훌륭하게 해결되었습니다! 다른 click () 이벤트 핸들러 (즉, 버튼을 클릭 할 때 실행되는 코드)를 동일한 버튼에 연결하려고하면 잠재적 인 문제가 있습니까?
— Nils_e
4
부트 스트랩 v4에서 작동하는지 궁금한 사람이 있다면 그렇게합니다. 답변은 2018 년에도 유효합니다.
— jreed
4
가장 인기있는 질문과 비교할 때 접근성이 좋습니다.
— CharlesM
47

내 이해는 onMouseDown이벤트에 따라 초점이 먼저 적용된다는 것 e.preventDefault()입니다.onMouseDown 필요에 따라 깨끗한 해결책이 될 수 있습니다. 이것은 접근하기 쉬운 솔루션이지만 웹 프로젝트와 호환되지 않을 수있는 마우스 클릭 동작을 조정합니다.

현재이 솔루션 ( react-bootstrap프로젝트 내 )을 사용하고 있으며 클릭 한 후 포커스 깜박임이나 버튼의 포커스를받지 못하지만 여전히 포커스를 탭하고 동일한 버튼의 포커스를 시각적으로 시각화 할 수 있습니다.

— pjs
소스
2
예. 귀하의 솔루션이 작동합니다. 팁 고마워. 다음은 솔루션 의 바이올린 입니다. 그러나 모든 버튼에 자바 스크립트 처리기가 연결되어 있어야합니다. CSS 전용 솔루션을 통해이를 달성 할 수 있다면 좋을 것입니다.
— Galeel Bhasha 2016
1
사람들은 당신이 그것을 클릭 할 때 요소에 집중하기를 기대한다고 생각하며,이 솔루션은 그것을 방지합니다. 나는 종종 요소를 클릭 한 다음 마우스를 놓기 전에 움직여서 초점을 맞 춥니 다.
— Michael Tontchev
7
스 니펫을 탐색하는 사람이라면 누구나 작동하며 onClick을 유지해야합니다.onMouseDown={e => e.preventDefault()}
— Adam K Dean
1
이렇게하면 스페이스 바와 리턴 키가 단추를 "클릭"하지 못합니다. 아마도 더 완벽한 해결책은 이것을 다음과 같이 다시 추가하는 것 onKeyUp={(e) => {if (e.keyCode === 13 || e.keyCode === 32) handleClick()}입니다.
— jfbloom22
onKeyUp이벤트 내에서 e.preventDefault ()를 호출하면 안됩니다 . 그렇게하면 스페이스 키 또는 리턴 키를 누르고 아무 곳이나 탭하거나 클릭 한 후에 버튼의 초점이 유지됩니다.
— jfbloom22
30

아무도이 글을 아직 게시하지 않았다고 믿을 수 없습니다.

버튼 대신 레이블을 사용하십시오.

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

깡깡이

— 아담 맥 케나
소스
11
이 방법은 대부분의 사용자에게 적합하지만이 방법은 스크린 리더 나 키보드에 익숙하지 않으며 시각 장애인과 운동 기술이 손상된 사용자는 버튼과 상호 작용할 수 없습니다.
— Murphy Randle
8
1. 레이블을 <a> 태그로 교체하십시오. 키보드를 통해 액세스 할 수 있습니다. 2. aria-role = "button"을 추가하여 화면 판독기 사용자의 접근성을 향상 시키십시오. 업데이트 된 Fiddle
— Galeel Bhasha 2016
좋은 해결책은 나를 도왔지만 래퍼를 사용하더라도 각도 지시어에는 작동하지 않습니다. 예<a class="btn"><my-directive/></a>
— ya_dimon
2
탭을 사용할 때 마우스를 사용하지 않는 사용자는 라벨을 완전히 건너 뛰고 접근성이 좋지 않습니다
— Felipe Jun
1
Bootstrap 4에서는 버튼 모양이 바뀌는 것 같습니다.
— Jason Kim
30

모든 초점이 맞춰진 버튼의 윤곽선을 제거하는 것은 쉽지만 (user1933897의 답변 에서와 같이) 접근성 관점에서 그 해결책은 좋지 않습니다 (예 : 브라우저의 기본 초점으로 메시지 중지 중지 개요 참조) )

반면에 클릭 한 버튼이 클릭 한 후 초점이 맞춰 졌다고 생각되면 클릭 한 버튼의 스타일을 중지하도록 브라우저를 설득하는 것이 불가능할 수도 있습니다 (OS X의 Chrome을보고 있습니다).

그래서 우리가 뭘 할 수 있지? 몇 가지 옵션이 떠 오릅니다.

1) 자바 스크립트 (jQuery) : $('.btn').mouseup(function() { this.blur() })

버튼을 클릭 한 직후 버튼 주위의 포커스를 제거하도록 브라우저에 지시하고 있습니다 . mouseup대신에 사용하여click 우리가 키보드 기반의 상호 작용의 기본 동작을 유지하고 ( mouseup키보드에 의해 트리거되지 않습니다).

2) CSS : .btn:hover { outline: 0 !important }

여기에서 호버 된 단추에 대해서만 윤곽선을 끕니다 . 분명히 이상적이지는 않지만 일부 상황에서는 충분할 수 있습니다.

— 알렉시스
소스
4
숫자 1은 유용한 팁입니다. 버튼을 누르지 않으면 포커스가 비활성화되지만 누르는 동안 표시 상태로 유지됩니다. 로 클릭 한 활성 요소에 대한 초점을 비활성화했습니다 :active:focus {outline:none;}.
— 확실히
이벤트 리스너를 바인딩하는 속기 함수는 jQuery에서 더 이상 사용되지 않으므로 .on('mouseup', function() { ... })대신 사용하는 것이 좋습니다..mouseup()
— Crazy Redd
16

이것은 나를 위해 일했습니다. 필요한 CSS를 재정의하는 사용자 정의 클래스를 만들었습니다.

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

여기에 이미지 설명을 입력하십시오

-webkit-box-shadow는 Chrome 및 Safari 브라우저에서 작동합니다.

— men_aka
소스
나를 위해 작동하지만 border: none !important;같은 크기를 유지 하기 위해 버튼 을 제거해야했습니다
— Emeka Mbah
1
위의 답변에서 작동하지 않는 onClick 포커스를 제거하려고했지만 "상자-그림자 : 없음! 중요;" @Menaka
— Zaif Warm
11

이것은 언급되지 않은 또 다른 해결책입니다. 그냥 클릭 이벤트에 던져 ...

$(this).trigger("blur");

또는 다른 행사 / 방법에서 전화하십시오.

$(".btn_name").trigger("blur");
— 롭
소스
이것의 문제점은 키보드 사용자가 버튼을 "클릭"할 때 (포커스 한 다음 스페이스를 누름으로써) 포커스를 잃는다는 것입니다. 그런 다음 어디에 있든지 다시 탭해야합니다. Tam
— Tamlyn
8

규칙 :focus { outline: none; }을 사용하여 윤곽선을 제거하면 링크 나 컨트롤에 초점을 맞출 수 있지만 키보드 사용자에게는 초점이 표시되지 않습니다. JS와 같은 것을 제거하는 방법onfocus="blur()" 은 훨씬 나 빠지고 키보드 사용자가 컨트롤과 상호 작용할 수 없게됩니다.

사용할 수있는 해킹은 일종의 OK 이며 :focus { outline: none; }사용자가 마우스와 상호 작용할 때 규칙을 추가 하고 키보드 상호 작용이 감지되면 다시 제거합니다. 린제이 에반스 는 이것을 위해 lib를 만들었다 : https://github.com/lindsayevans/outline.js

그러나 html 또는 body 태그에서 클래스를 설정하는 것을 선호합니다. CSS 파일에서 이것을 언제 사용할지 제어하십시오.

예를 들어, 인라인 이벤트 핸들러는 데모 목적으로 만 사용됩니다.

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

나는 togheter에게 펜을 넣었습니다. http://codepen.io/snobojohan/pen/RWXXmp

그러나 성능 문제가 있음을주의하십시오. 이것은 사용자가 마우스와 키보드 사이를 전환 할 때마다 강제로 다시 칠합니다. 불필요한 페인트 피하기에 대한 추가 정보 http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

— 스노 보요 한
소스
6

나는 똑같은 것을 보았고 실제로 성가 시지만 이것을 처리하는 적절한 방법이 없다고 생각합니다.

버튼의 접근성을 완전히 없애기 때문에 주어진 다른 모든 솔루션에 대해 권장합니다. 이제 버튼을 탭하면 예상되는 초점을 얻지 못합니다.

이것은 피해야합니다!

.btn:focus {
  outline: none;
}
— 오스카 볼라뇨스
소스
초점이 맞았을 때 여전히 약간 다른 번개 버튼이 있으므로 키보드 사용자조차도 여전히 그것을 인식 할 수 있기 때문에 이것이 잘못되었다고 생각하지 않습니다. 그러나이 아닌가요의 한 정도로, 당신은 마우스 왼쪽 버튼을 누른 채로 있으면 당신은 여전히 테두리 프레임을 얻을 것이기 때문에
— apocalypz
6

해결책을 찾았습니다. 우리가 초점을 맞추면 부트 스트랩은 상자 그림자를 사용하므로 이미지를 비활성화 할 수 있습니다 (평판이 충분하지 않으면 이미지를 업로드 할 수 없습니다 :()).

내가 추가 

.btn:focus{
    box-shadow:none !important;
}

효과가있다.

— 태피
소스
6

옵션 1 : :focus-visible의사 클래스 사용

:focus-visible의사 클래스 (터치 또는 마우스 클릭을 통해, 즉)보기 흉한 윤곽을 죽이고 키보드를 통해 탐색되지 않은 사용자에 대한 버튼과 다양한 요소에 반지를 집중하는 데 사용할 수 있습니다.

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

경고 : 2020 년부터 :focus-visible의사 클래스는 브라우저에서 광범위하게 지원되지 않습니다 . 그러나 polyfill은 사용하기가 매우 쉽습니다. 아래 지침을 참조하십시오.


옵션 2 : .focus-visible폴리 필 사용

이 솔루션은 위에서 언급 한 의사 클래스 대신 일반 CSS 클래스를 사용 하며 공식 Javascript 기반 polyfill 이므로 광범위한 브라우저를 지원합니다 .

1 단계 : HTML 페이지에 Javascript 종속성 추가

참고 : focusvisible polyfill에는 classList를 지원 하지 않는 몇 가지 구형 브라우저에 대한 추가 polyfill이 필요합니다 .

<!-- place this code just before the closing </html> tag -->
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList"></script>
<script src="https://unpkg.com/focus-visible"></script>

2 단계 : 스타일 시트에 다음 CSS 추가

다음은 위에 자세히 설명 된 CSS 솔루션의 수정 된 버전입니다. 

/**
 * Custom cross-browser styles for keyboard :focus overrides defaults.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069 !important;
}

/**
 * Remove focus styles for non-keyboard :focus.
 */
*:focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

3 단계 (선택 사항) : 필요한 경우 'focus-visible'클래스를 사용하십시오.

누군가가 터치를 클릭하거나 사용할 때 포커스 링을 실제로 표시하려는 항목이 있으면 focus-visible클래스를 DOM 요소에 추가하십시오 .

<!-- This example uses Bootstrap classes to theme a button to appear like
     a regular link, and then add a focus ring when the link is clicked --->
<button type="button" class="btn btn-text focus-visible">
  Clicking me shows a focus box
</button>

자원:

데모:

— 제임스 윌슨
소스
그러나 크롬조차도 아직 지원하지 않는다면 아마도 최고의 솔루션은 아닐 것입니다.
— Elijah Mock
대신 무엇을 제안 하시겠습니까?
— JamesWilson
이 솔루션이보다 표준화 될 때까지 다른 답변과 마찬가지로 개요를 숨기십시오.
— Elijah Mock
내가 읽은 것으로부터, 접근성이 문제가된다면, 개요 카르테를 숨기는 것이이 <whatever>:focus { outline: none }솔루션보다 더 나쁜 생각이다. 실제로 접근성 커뮤니티에는 개요를 제거하지 않고 모든 것을 : focus 스타일 (개요 또는 상자 그림자)로 만들고 브라우저가 허용하는 방법을 구현할 때까지 : focus-visible을 지원하지 않으려는 사람들이 있습니다. 사용자는 모든 항목에 초점을 맞출 수 있는지 여부에 대한 사용자 기본 설정을 지정합니다. 저는 Focus-visible이 디자인 문제와 a11y 사이의 행복한 매체라고 생각합니다.
— JamesWilson
5

위의 방법으로 문제가 해결되지 않으면 다음을 시도하십시오.

.btn : focus {outline : none; box-shadow : none; 테두리 : 2px 단색 투명;}

user1933897이 지적했듯이 이는 Chrome을 사용하는 MacOS에만 해당 될 수 있습니다.

— alns
소스
여전히 이것은 bootstrap 4.0Windows에서 사용할 때 유효합니다
— 3gwebtrain
5

늦었지만 그것을 아는 사람이 누군가를 도울 수 있습니다. CSS는 다음과 같습니다.

.rhighlight{
   outline: none !important;
   box-shadow:none
}

HTML은 다음과 같습니다.

<button type="button" class="btn btn-primary rHighlight">Text</button>

이렇게하면 btn을 유지할 수 있으며 관련 동작을 수행 할 수 있습니다.

— 스테파니 위쉬
소스
1
element:focus { box-shadow: none; }파란색 윤곽선 / 그림자를 제거했습니다.
— user435421
3

위의 의견에서 이것을 언급했지만 명확성을 위해 별도의 답변으로 나열 할 가치가 있습니다. 실제로 버튼에 초점을 맞출 필요가없는 한, 포커스 이벤트를 사용하여 CSS 효과를 적용하기 전에이를 제거 할 수 있습니다.

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

클릭 이벤트를 사용할 때 볼 수있는 깜박임을 방지합니다. 인터페이스가 제한되어 버튼으로 탭할 수는 없지만 모든 응용 프로그램에서 문제가되는 것은 아닙니다.

— 찰스
소스
이것은 나를 위해 속임수의 절반을했습니다. React 및 React-Bootstrap을 사용하고 있습니다. 클릭 한 후 버튼이 계속 강조 표시되어 있습니다. e.target.blur () 추가하기; 글로우를 제거하지만 버튼은 다른 색상으로 유지됩니다.
— pixelwiz
3

스타일

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

사용

<button class="btn btn-primary not-focusable">My Button</button>
— 보그 단 칸테 루크
소스
이 솔루션은 다른 답변과 어떻게 다릅니 까?
— apaul
2
약간의 차이점이 있습니다. 모든 버튼, 링크 등의 동작을 재정의하지 않고 "포커스 불가능"클래스를 지정하는 데 필요한 요소에 대한 포커스를 제거 할 수 있습니다.
— Bogdan Kanteruk
3

버튼 주위의 테두리를 제거하려면이 솔루션을 사용해보십시오. 이 코드를 CSS에 추가하십시오.

시험 

button:focus{
outline:0px;
}

작동하지 않으면 아래를 사용하십시오.

button:focus{
 outline:none !important;
 }
— 라나 알라 미어
소스
두 번째는 React Material UI 버튼으로도 작동합니다
— Geek Guy
3

순수한 CSS 방법을 원하는 사람들에게 :

:focus:not(:focus-visible) { outline: none }

이것은 링크 등에서도 작동하며 보너스는 키보드 액세스 기능을 유지합니다. 마지막으로 지원하지 않는 브라우저에서는 무시됩니다 : focus-visible

— 마틴 페드로
소스
4
— Justin Kahn
focus-visible이제 공식 폴리 필이 있습니다. 이 질문에 대한 내 대답 stackoverflow.com/a/60219624/413538 는 실제로이 모든 것을 이해하는 방법에 대해 자세히 설명합니다.
— JamesWilson
2

비슷한 문제가 발생하여 Bootstrap 3 의 탭에 문제가없는 것으로 나타났습니다 (Chrome). 그들은 개요 스타일을 사용하는 것 같습니다 브라우저가 수행하고 크롬은 당신이 원하는 것을 할 것 같다 무엇을 가장 결정할 수 있습니다 : 당신은 그냥 요소를 클릭하지 않으면 초점을 때 윤곽을 보여줍니다.

outline-style브라우저가 그 의미를 결정하기 때문에 지원을 찾기 가 어렵습니다. 몇 가지 브라우저를 확인하고 대체 규칙을 사용하는 것이 가장 좋습니다.

— 테크노 파인드
소스
2

다른 가능한 해결책은 사용자가 버튼을 클릭 할 때 Javascript 리스너를 사용하여 클래스를 추가 한 다음 다른 리스너와 함께 포커스를두고 해당 클래스를 제거하는 것입니다. 이렇게하면 접근성 (보이는 탭)이 유지되는 동시에 클릭 할 때 버튼이 강조 표시되는 Chrome의 기발한 동작을 방지 할 수 있습니다.

JS :

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS :

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

전체 예는 다음과 같습니다. https://jsfiddle.net/4bbb37fh/

— 세브 울 포드
소스
클릭 대신 mouseDown을 사용하십시오. 클릭하면 마우스를 처음 (누르지 않고) 누를 때 개요가 나타납니다.
— Vincent Hoch-Drei
2 
.btn:focus:active {
  outline: none;
}

클릭하면 외곽선이 제거되지만 탭할 때 초점을 유지합니다 (a11y).

— 엔 네퍼
소스
마우스 아래의 윤곽 만 제거합니다. 마우스를 올리면 윤곽선이 나타납니다.
— Wellspring
2

이것은 가장 잘 작동합니다

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
1 
  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

이 개요는 버튼과 태그 모두에서 작동하지 않습니다.

— 밀라노 파니 그라 히
소스
이것이 어떻게 질문에 대답합니까? 설명을 추가하십시오.
— André Kool
1

이것을 CSS에 추가하십시오 :

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
— 가브리엘리스
소스
0

버튼을 사용하여 "전환"이벤트를 트리거하는 동안 MacOS와 Chrome에서 동일한 문제가 발생했습니다. 이것을 읽는 사람이 이미 이벤트 리스너를 사용하고 있다면, .blur()조치를 수행 한 후 호출 하여 해결할 수 있습니다 .

예:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

이벤트 리스너를 아직 사용하지 않는 경우이를 해결하기 위해 하나만 추가하면 불필요한 오버 헤드가 추가 될 수 있으며 이전 답변과 같은 스타일링 솔루션이 더 좋습니다.

— 요셉
소스
0

을 설정할 수 있습니다 tabIndex="-1". 포커스 가능한 컨트롤을 탭하면 브라우저가이 버튼을 건너 뛰게됩니다.

여기에 제안 된 다른 "수정 사항"은 초점 윤곽선 만 제거하지만 여전히 단추를 탭으로 남겨 둡니다. 그러나 사용 편의성 측면에서 이미 광선을 제거 했으므로 사용자는 현재 초점이 맞춰진 버튼을 알 수 없습니다.

반면, 버튼을 탭 가능하게하지 않으면 접근성이 영향을 미칩니다.

나는 그것을 사용하여 X 버튼에서 초점 윤곽선을 제거 bootstrap modal합니다.이 버튼은 하단에 중복 된 "닫기"버튼이 있으므로 솔루션은 접근성에 영향을 미치지 않습니다.

— zmechanic
소스
0

웹킷 브라우저 (및 잠재적으로 웹킷 공급 업체 접두어와 호환되는 브라우저)를 사용하는 경우 해당 아웃 라인은 버튼의 -webkit-focus-ring유사 클래스에 속합니다 . 간단하게 그것의 설정 outline에 none:

*:-webkit-focus-ring {
  outline: none;
}

Chrome은 이러한 웹킷 브라우저이며 Linux에서도이 효과가 발생합니다 (일부 Chrome 스타일 은 macOS 전용 이지만 macOS에만 해당 되는 것은 아닙니다)

— 네이트 사이 머
소스
0

<a>버튼으로 작동 하는 것과 동일한 문제가 발생 했으며 attr을 추가하여 해결 방법 이 누락type="button" 되어 적어도 정상적으로 작동합니다.

<a type="button" class="btn btn-primary">Release Me!</a>

— spcsLrg
소스
이 type속성은 이에 영향을 미치지 않아야 button하며 유효하지 않은 값입니다. 속성은 MIME 타입을 허용하고는 링크를 따라하는 경우 (얻을 예를 기대할 데이터의 종류 어떤 클라이언트 알려줍니다 <a type="application/pdf" ...>.
— 쿠엔틴
@Quentin 감사합니다. 예, 알고 있습니다. 나는 시작 role="button"했지만 작동하지 않았다 ( <button>대신에을 사용한 후 <a>). 내 구현은 특별히을 요구 <a>하지 <button>. 그래서 많이 생각한 후에이 해결 방법 (대부분 BS 버그)을 발견했습니다!
— spcsLrg
0

html 태그에서 직접 (디자인의 다른 곳에 부트 스트랩 테마를 남겨 두려는 시나리오에서).

시도하는 ..

<button style="border: transparent;">
<button style="border: 1px solid black;">

.. 요법. 원하는 효과에 따라

— 아무도
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.