클릭 시 포커스 어라운드 버튼을 제거하는 방법

클릭 시 포커스 어라운드 버튼을 제거하는 방법

버튼을 클릭하면 버튼 주변에 모두 하이라이트가 나타납니다.크롬에 있습니다.

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

저는 부트스트랩을 테마로 사용하고 있지만, 그건 아니라고 확신합니다. 전에 다른 프로젝트에서 이 사실을 알고 있었습니다.

를 쓰면 .<a>다 대신 합니다.<button> 제가 요.<button>어떻게 하면 이걸 없앨 수 있을까요?

다른 페이지에서 이 Q와 A를 찾았는데, 버튼 포커스 스타일을 재정의하는 것이 효과적이었습니다.이 문제는 크롬이 탑재된 MacOS에만 해당될 수 있습니다.

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

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

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

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

.blur() 메서드는 포커스 강조를 올바르게 제거하고 부트스트랩의 스타일을 엉망으로 만들지 않습니다.

포커스 가시성 사용

참고 1: 아래에 설명된 각 3가지 옵션에서 버튼은 동일하게 동작하지만(클릭 시 포커스 링 없음), 기본 동작에서 선택 및 입력이 조금씩 다릅니다.옵션 3만 버튼, 입력 및 선택 주변에서 포커스 링을 일관되게 제거합니다.모든 접근 방식을 비교하고 그 의미를 이해했는지 확인하시기 바랍니다.

참고 2: CSS의 계단식 특성 때문에 CSS 규칙의 순서가 중요합니다.

3: § 3: § 접근성에 대한 우려는 여전히 존재합니다.focus-visible. 포커스링을 언제 할 수 까지는 항상하는 것보다는 유해한 ④보다는 으로 보아야 , 브라우저가 사용자가 보이는 포커스 링을 언제 표시할지 선택할 수 있도록 구성을 노출할 때까지 포커스 가시성은 어디에서나 항상 포커스 링을 사용하는 것보다 접근성에 더 나쁘지만 유해한 것보다는 낫다는 것을 고려해야 합니다.:focus {outline:none}이 질문에 대한 다른 답변에서 언급된 접근 방식.자세한 내용은 이 답변 하단의 "접근성에 관한 참고" 섹션을 참조하십시오.

옵션 1: 다음을 사용합니다.:focus-visible

의사 클래스는 키보드를 통해 탐색하지 않는 사용자를 위해(즉, 터치 또는 마우스 클릭을 통해) 윤곽선과 버튼 및 다양한 요소의 포커스 링을 제거하는 데 사용할 수 있습니다.

경고:2021년 현재, 의사 클래스는 현대 브라우저 전반에 걸쳐 광범위하게 지원되지만 프린지 브라우저에서는 실패합니다.이전 브라우저 지원이 중요한 경우 아래 옵션 2의 자바스크립트 폴리필이 가장 근접한 근사치입니다.

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

/**
 * Cross-browser styles for explicit focus via 
 * keyboard-based (eg Tab) navigation or the
 * .focus-visible utility class.
 */
:focus,
.focus-visible:focus:not(:focus-visible) {
  outline: 0;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069;
}

<h3>Defaults:</h3>
<button>Foo</button>
<input type="button" value="Bar"/> 
<select><option>Baz</option></select>
<input type="text" placeholder="Qux"/>
<textarea placeholder="Quux" rows="1"></textarea>

<h3>Force focus on click:</h3>
<button class="focus-visible">Foo</button>
<input class="focus-visible" type="button" value="Bar"/> 
<select class="focus-visible"><option>Baz</option></select>
<input class="focus-visible" type="text" placeholder="Qux"/>
<textarea class="focus-visible" placeholder="Quux" rows="1">
</textarea>

옵션 2: A를 사용합니다..focus-visible(polyfill)

이 솔루션은 위에서 언급한 의사 클래스 대신 일반 CSS 클래스를 사용하며 브라우저 지원 폭이 넓습니다(2021년).HTML에 1개 또는 2개의 자바스크립트를 추가해야 합니다. 하나는 공식 포커스 표시 폴리필용이고 다른 하나는 classList를 지원하지 않는 오래된 브라우저용입니다.

에서, 을 Chrome 와 을 하는 으로 에서 으로 하는 을 :focus-visible사이비 계급의

/**
 * Cross-browser focus ring for explicit focus 
 * via keyboard-based (eg Tab) navigation or the
 * .focus-visible utility class.
 */
:focus {
  outline: 0;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069;
}

/**
 * Remove focus ring for non-explicit scenarios.
 */
:focus:not(.focus-visible) {
  outline: 0;
  box-shadow: none;
}

<h3>Defaults:</h3>
<button>Foo</button>
<input type="button" value="Bar"/> 
<select><option>Baz</option></select>
<input type="text" placeholder="Qux"/>
<textarea placeholder="Quux" rows="1"></textarea>

<h3>Force focus on click:</h3>
<button class="focus-visible">Foo</button>
<input class="focus-visible" type="button" value="Bar"/> 
<select class="focus-visible"><option>Baz</option></select>
<input class="focus-visible" type="text" placeholder="Qux"/>
<textarea class="focus-visible" placeholder="Quux" rows="1">
</textarea>

<!-- 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>

옵션 3: 전역 키 탐색 대 마우스 탐색 상태 사용

가시화의 은 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ ΔΔ Δ Δ,mousemove합니다.keydown -> "Tab"하지 않아야 . 이 경우 윤곽선을 표시하지 않아야 하는 요소를 지정하기보다는 어떤 요소를 지정해야 합니다.

document.addEventListener("mousemove", () => 
  document.body.classList.remove("focus-visible")
);

document.addEventListener("keydown", ({key}) => 
  (key === "Tab") && document.body.classList.add("focus-visible")
);

/**
 * Cross-browser focus ring for explicit focus 
 * via keyboard-based (eg Tab) navigation or the
 * .focus-visible utility class.
 */
:focus {
  outline: 0;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069;
}

/**
 * Remove focus ring for non-explicit scenarios.
 */
body:not(.focus-visible) :focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

<h3>Defaults:</h3>
<button>Foo</button>
<input type="button" value="Bar"/> 
<select><option>Baz</option></select>
<input type="text" placeholder="Qux"/>
<textarea placeholder="Quux" rows="1"></textarea>

<h3>Force focus on click:</h3>
<button class="focus-visible">Foo</button>
<input class="focus-visible" type="button" value="Bar"/> 
<select class="focus-visible"><option>Baz</option></select>
<input class="focus-visible" type="text" placeholder="Qux"/>
<textarea class="focus-visible" placeholder="Quux" rows="1">
</textarea>

접근성에 관한 참고사항

을 제거하는 은 라 을 입니다 하는 입니다 하는 을 :focus { outline: none; }아니면:focus { outline: 0; }는 알려진 접근성 문제이므로 권장되지 않습니다.또한 접근성 커뮤니티에는 포커스 링 윤곽선을 제거하지 않고 모든 것이 다음과 같이 되기를 원하는 사람들이 있습니다.:focus—일 -둘나중outline아니면box-shadow적절한 스타일이면 유효할 수 있습니다.

의 일부 ①, ②, ③, ④, ⑤를 구현해서는 안 된다고 생각합니다.:focus-visible모든 브라우저가 모든 항목에 초점을 맞출 수 있는지 여부를 선택할 수 있는 사용자 선호도를 구현하고 노출할 때까지 웹 사이트에서 사용할 수 있습니다.나는 개인적으로 이 생각에 동의하지 않습니다. 그래서 나는 유해한 것보다 훨씬 낫다고 느끼는 해결책을 제공했습니다.:focus { outline:none }.생각합니다:focus-visible디자인 문제와 접근성 문제 사이에서 행복한 매개체입니다., 포커스 가시성 선호도를 , 는 .2022재롬는스성을다지는만를자는년다지는s만t를자0,s .

리소스:

• https://css-tricks.com/keyboard-only-focus-styles/

데모:

• https://wicg.github.io/focus-visible/demo/

은 가 은 에 입니다 된다는 이 하는 입니다 된다는 뒤에 먼저 적용되는 것으로 알고 .onMouseDown이벤트,트호를 합니다.e.preventDefault()인에onMouseDown필요에 따라 깨끗한 해결책이 될 수 있습니다.이것은 확실히 접근성이 좋은 해결책이지만 웹 프로젝트와 호환되지 않을 수 있는 마우스 클릭 동작을 조정합니다.

이1 하고 을 하고 내).react-bootstrap프로젝트)를 클릭한 후에 포커스가 깜박이거나 버튼의 포커스가 유지되지는 않지만 포커스를 탭하고 동일한 버튼의 포커스를 시각적으로 시각화할 수 있습니다.

아직 아무도 이것을 게시하지 않았다는 것이 믿기지 않습니다.

단추 대신 레이블을 사용합니다.

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

피들

(사용자1933897의 답변에서처럼) 모든 초점 버튼에 대한 윤곽선만 제거하는 것은 쉽지만, 접근성 관점에서는 이 솔루션이 좋지 않습니다(예: 브라우저의 기본 초점 윤곽선을 건드리는 것 중지 참조).

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

그래서 우리는 무엇을 할 수 있을까요?몇 가지 선택지가 떠오릅니다.

1) (jQuery):$('.btn').mouseup(function() { this.blur() })

버튼을 클릭한 후 즉시 모든 버튼을 중심으로 초점을 제거하도록 브라우저에 지시하는 것입니다.사용함으로써mouseup에 대신에click 기반 작용에 기본 반호에한본고다을드(다고e을re'드 ).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");

해결책을 찾았습니다.초점을 맞출 때 부트스트랩은 박스 패턴을 사용하므로 비활성화만 합니다(평판이 부족하고 이미지를 업로드할 수 없습니다:().

덧붙입니다

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

그건 효과가 있다.

할 경우 을 하는 하는 :focus { outline: none; }윤곽선을 제거하기 위해 링크나 컨트롤은 초점을 맞출 수 있지만 키보드 사용자에게는 초점 표시가 없습니다.JS와 같은 onfocus="blur()"키보드 사용자가 컨트롤과 상호 작용할 수 없는 상황이 발생할 수 있습니다.

당신이 사용할 수 있는 해킹, 즉 일종의 OK는 다음을 포함합니다.:focus { outline: none; }사용자가 마우스와 상호 작용할 때 규칙을 만들고 키보드 상호 작용이 감지되면 다시 제거합니다.린제이 에반스는 이것을 위한 립을 만들었습니다. https://github.com/lindsayevans/outline.js

하지만 html이나 body tag에 클래스를 설정하고 싶습니다.그리고 이것을 언제 사용할지 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>

펜을 만들었습니다. http://codepen.io/snobojohan/pen/RWXXmp

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

저도 마찬가지라는 것을 알았고, 그것이 정말 저를 짜증나게 하지만, 이 문제를 해결할 적절한 방법이 없다고 생각합니다.

다른 솔루션은 버튼의 접근성을 완전히 떨어뜨리기 때문에 버튼을 탭하면 예상되는 포커스를 얻을 수 없기 때문에 제공되는 모든 솔루션에 반대하는 것을 권장합니다.

이것은 피해야 합니다!

.btn:focus {
  outline: none;
}

늦었지만, 누군가에게 도움이 될지도 모릅니다.CSS는 다음과 같습니다.

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

HTML은 다음과 같습니다.

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

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

위의 내용이 효과가 없다면 다음을 시도해 보십시오.

.btn:focus {focus:none; box-locus:none; border:2pcs solid transparent;}

사용자1933897이 지적했듯이, 이것은 크롬이 탑재된 맥OS에만 해당될 수 있습니다.

부트스트랩(v4.4.1) 클래스를 사용한 형태의 제출 버튼을 사용하여 동일한 상황을 발견했습니다.문제는 자바스크립트를 이용하여 DOM에 필요한 모든 변경사항을 조작하기 위해 한 페이지짜리 사용자 인터페이스를 구축하는 과정에서 발생했습니다.양식 데이터는 HTTP POST 요청이 아닌 JSON 문자열을 사용하여 'fetch'를 통해 서버에 제출되었습니다.일반적으로 양식의 기본 동작은 문서를 다시 로드하는 것이며, 일반적으로 이렇게 하면 단추가 새로 고쳐지지만, e를 사용하면 양식의 기본 동작이 방지됩니다.양식의 제출 이벤트에 대한 수신기 기능에서 preventDefault()를 방지합니다(단일 페이지 UI이므로 문서가 다시 로드되지 않고 서버로의 트래픽이 데이터로만 최소화됨).문서가 다시 로드되지 않은 상태에서 사용자가 창의 다른 곳을 클릭할 때까지 단추가 눌려 있는 것으로 보입니다.이것이 제가 가지고 있던 (문제와 관련된) 것입니다.

<input type="submit" class="btn btn-primary">

버튼을 누른 채로 있는 문제를 해결하기 위해 사용한 방법은 다음과 같습니다.

<input type="submit" class="btn btn-primary" onmouseup="this.blur()">

이를 위한 순수한 CSS 방법을 원하는 사람들을 위해:

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

이것은 또한 링크 등에도 적용될 수 있으며, 키보드 접근성을 유지해 줍니다.마지막으로 지원하지 않는 브라우저에서 무시:focus-visible

사용하는 모든 사용자에게react-bootstrap 문제에 한과 같습니다:에혀가한다은과이다과은d이에한혀k가tio:s .

.btn:focus {
    /* the !important is really the key here, it overrides everything else */
    outline: none !important;
    box-shadow: none !important;
}

하기 에 이 하지 하지 이 하기 에 !important.

위에 댓글로 말씀드렸으나 명확성을 위해 별도의 답변으로 기재할 가치가 있습니다.버튼에 초점을 맞출 필요가 없는 한 CSS 효과를 적용하기 전에 포커스 이벤트를 사용하여 버튼을 제거할 수 있습니다.

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

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

스타일.

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

사용.

<button class="btn btn-primary not-focusable">My Button</button>

단추 주변의 테두리를 제거하려면 이 솔루션을 사용합니다.이 코드를 CSS에 추가합니다.

해라

button:focus{
outline:0px;
}

작동하지 않는 경우 아래를 사용합니다.

button:focus{
 outline:none !important;
 }

일입니다. 도와주셨으면 좋겠습니다.

.btn:focus, .btn:focus:active {
    outline: none;
}

약간 핵적이지만 이것은 Angular 9에서 나에게 효과가 있었던 간단한 방법입니다.모든 html 요소에 영향을 미치므로 causon과 함께 사용합니다.

*:focus {
  outline: 0 !important;
}

우리는 비슷한 문제를 겪고 있었고 (Chrome에서) Bootstrap 3의 탭에 문제가 없다는 것을 알게 되었습니다.브라우저가 최선의 방법을 결정할 수 있고 크롬이 원하는 것을 할 수 있는 아웃라인 스타일을 사용하는 것처럼 보입니다. 요소를 클릭하지 않는 한 초점이 맞춰지면 아웃라인이 표시됩니다.

을 합니다.outline-style브라우저가 그것이 무엇을 의미하는지 결정하기 때문에 고정하기가 어렵습니다.몇 개의 브라우저를 체크인하고 폴백 규칙을 가지는 것이 가장 좋습니다.

사용자가 버튼을 클릭할 때 자바스크립트 리스너를 이용하여 클래스를 추가하고 다른 리스너와 포커스를 맞춰 클래스를 제거하는 것도 가능한 방법입니다.이를 통해 접근성(보이는 탭)을 유지하는 동시에 클릭 시 초점이 맞는 버튼을 고려하는 크롬의 특이한 동작을 방지할 수 있습니다.

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/

.btn:focus:active {
  outline: none;
}

클릭 시 윤곽선은 제거되지만 탭을 누를 때는 초점이 유지됩니다(11y의 경우).

이 제품이 가장 적합합니다.

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

당신의 CSS 코드에서 아래에 간단히 추가할 수 있는 해결책을 찾았습니다.

button:focus { outline: none }

TS 용액으로 반응

  const btnRef = useRef<HTMLButtonElement | null>(null);
  const handleOnMouseUp = () => {
    btnRef.current?.blur();
  };
  
  <button
    ref={btnRef}
    onClick={handleOnClick}
    onMouseUp={handleOnMouseUp}
  >
    <span className="icon-plus"></span> Add Page
  </button>

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

이 개요: 버튼과 태그 모두에 대해 사용할 수 있습니다.

설정 가능합니다.tabIndex="-1"컨트롤을 때가 이 수. 포커스 가능한 컨트롤을 탭할 때 브라우저에서 이 버튼을 건너뛸 수 있습니다.

여기서 제안하는 다른 "수정사항"은 포커스 아웃라인만 제거하고 버튼은 테이블로 남겨 둡니다.그러나 사용성의 관점에서는 이미 글로우를 제거했기 때문에 사용자는 현재 포커스 버튼이 무엇인지 알 수 없습니다.

반면, 버튼을 비테이블로 만드는 것은 접근성에 영향을 미칩니다.

에서 을 하고 하기 의 X 버튼에서 아웃라인을 제거하기 하고 있습니다bootstrap modal이 중복되어 제 솔루션은 에 아무런 에 " "이 " 되어 " " 에 " " 은 " 에 " " 을 " " " " " 에 " 은 " 을 " " " 에 " " " "

CSS에 추가:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

언급URL : https://stackoverflow.com/questions/19053181/how-to-remove-focus-around-buttons-on-click