버튼을 클릭하면 내 버튼이 모두 강조 표시됩니다. 이것은 Chrome에 있습니다.
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>나는 주제와 함께 부트 스트랩을 사용하고 있지만 그것이 사실이 아니라고 확신합니다. 다른 프로젝트에서 전에 이것을 알았습니다.
<a>대신 태그를 사용하면 사라집니다 <button>. 왜? <button>어떻게 사용 하고 싶 습니까?
답변
다른 페이지 에서이 Q와 A를 찾았고 버튼 포커스 스타일을 재정의하면 나에게 도움이되었습니다. 이 문제는 Chrome을 사용하는 MacOS에만 해당 될 수 있습니다.
.btn:focus {
outline: none;
box-shadow: none;
}이것은 접근성에 영향을 미치며 버튼과 입력에 대해 일관된 초점 상태가 될 때까지 권장되지 않습니다. 아래 의견에 따르면, 마우스를 사용할 수없는 사용자가 있습니다.
답변
당신은 다음과 같은 것을 원합니다 :
<button class="btn btn-primary btn-block" onclick="this.blur();">....blur () 메서드는 포커스 강조 표시를 올바르게 제거하고 Bootstraps 스타일을 손상시키지 않습니다.
답변
내 이해는 onMouseDown이벤트에 따라 초점이 먼저 적용된다는 것 e.preventDefault()입니다.onMouseDown 필요에 따라 깨끗한 해결책이 될 수 있습니다. 이것은 접근하기 쉬운 솔루션이지만 웹 프로젝트와 호환되지 않을 수있는 마우스 클릭 동작을 조정합니다.
현재이 솔루션 ( react-bootstrap프로젝트 내 )을 사용하고 있으며 클릭 한 후 포커스 깜박임이나 버튼의 포커스를받지 못하지만 여전히 포커스를 탭하고 동일한 버튼의 포커스를 시각적으로 시각화 할 수 있습니다.
답변
아무도이 글을 아직 게시하지 않았다고 믿을 수 없습니다.
버튼 대신 레이블을 사용하십시오.
<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>답변
모든 초점이 맞춰진 버튼의 윤곽선을 제거하는 것은 쉽지만 (user1933897의 답변 에서와 같이) 접근성 관점에서 그 해결책은 좋지 않습니다 (예 : 브라우저의 기본 초점으로 메시지 중지 중지 개요 참조) )
반면에 클릭 한 버튼이 클릭 한 후 초점이 맞춰 졌다고 생각되면 클릭 한 버튼의 스타일을 중지하도록 브라우저를 설득하는 것이 불가능할 수도 있습니다 (OS X의 Chrome을보고 있습니다).
그래서 우리가 뭘 할 수 있지? 몇 가지 옵션이 떠 오릅니다.
1) 자바 스크립트 (jQuery) : $('.btn').mouseup(function() { this.blur() })
버튼을 클릭 한 직후 버튼 주위의 포커스를 제거하도록 브라우저에 지시하고 있습니다 . mouseup대신에 사용하여click 우리가 키보드 기반의 상호 작용의 기본 동작을 유지하고 ( mouseup키보드에 의해 트리거되지 않습니다).
2) CSS : .btn:hover { outline: 0 !important }
여기에서 호버 된 단추에 대해서만 윤곽선을 끕니다 . 분명히 이상적이지는 않지만 일부 상황에서는 충분할 수 있습니다.
답변
이것은 나를 위해 일했습니다. 필요한 CSS를 재정의하는 사용자 정의 클래스를 만들었습니다.
.custom-button:focus {
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
-webkit-box-shadow는 Chrome 및 Safari 브라우저에서 작동합니다.
답변
이것은 언급되지 않은 또 다른 해결책입니다. 그냥 클릭 이벤트에 던져 …
$(this).trigger("blur");또는 다른 행사 / 방법에서 전화하십시오.
$(".btn_name").trigger("blur");