태그 보관물: twitter-bootstrap

twitter-bootstrap

클릭시 버튼 주위의 초점을 제거하는 방법 주제와 함께 부트 스트랩을

버튼을 클릭하면 내 버튼이 모두 강조 표시됩니다. 이것은 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");