버튼과 링크에서 Firefox의 점선을 제거하는 방법은 무엇입니까?

Firefox에서 다음 과 같은 링크 에 점이 찍힌 초점 윤곽선을 표시하지 않도록 할 수 있습니다

a:focus { 
    outline: none; 
}

그러나 <button>태그에 대해서도 어떻게 할 수 있습니까? 내가 이것을 할 때 :

button:focus { 
    outline: none; 
}

버튼을 클릭해도 버튼에 점선 초점 윤곽이 나타납니다.

(예, 이것이 유용성 문제라는 것을 알고 있지만 추한 회색 점 대신 디자인에 적합한 내 자신의 포커스 힌트를 제공하고 싶습니다)

button::-moz-focus-inner {
  border: 0;
}

선택기를 정의 할 필요가 없습니다.

:focus {outline:none;}
::-moz-focus-inner {border:0;}

그러나 이는 W3C의 접근성 모범 사례를 위반합니다. 키보드로 탐색하는 사람들을 돕는 개요가 있습니다.

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

점선으로 된 윤곽선을 제거하기 위해 CSS를 사용하려는 경우 :

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

아래는 LINKS의 경우 공유에 대한 생각으로 누군가에게 관심이있는 경우에 도움이되었습니다.

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

건배!

:focus, :active {
    outline: 0;
    border: 0;
}

[업데이트]이 솔루션은 더 이상 작동하지 않습니다. 나를 위해 일한 해결책은 이것입니다 https : //.com/a/3844452/925560

Firefox 24.0에서는 정답으로 표시되지 않았습니다.

버튼과 앵커 태그에서 Firefox의 점선 윤곽선을 제거하기 위해 아래 코드를 추가했습니다.

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

여기에서 해결책을 찾았습니다 : http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

여기에서 대부분의 답변을 시도했지만 그중 아무것도 나를 위해 일하지 않았습니다. Chrome의 버튼에서 파란색 윤곽선을 제거해야한다는 것을 깨달았을 때 다른 해결책을 찾았습니다. Chrome의 CSS 맞춤 스타일 버튼에서 파란색 테두리 제거

이 코드는 Windows 7의 Firefox 버전 30에서 저에게 효과적이었습니다. 아마도 다른 누군가를 도울 수 있습니다 :)

button:focus {outline:0 !important;}

CSS를 사용하여 Firefox에서 이러한 점을 찍을 수있는 방법은 없습니다.

웹 응용 프로그램이 작동하는 컴퓨터에 액세스 할 수 있으면 Firefox의 about : config로 이동 browser.display.focus_ring_width하여 0으로 설정하십시오. 그러면 Firefox에 점선 테두리가 전혀 표시되지 않습니다.

다음 버그는 주제를 설명합니다. https://bugzilla.mozilla.org/show_bug.cgi?id=74225

웹에는이 솔루션에 대한 많은 솔루션이 있지만 많은 솔루션이 작동하지만 강제로 사용하면 다음을 사용하면 한 번만 강조 표시하거나 집중할 수 없습니다.

::-moz-focus-inner, :active, :focus {
    outline:none;
    border:0;
    -moz-outline-style: none;
}

이것은 약간의 추가 보안을 추가하고 거래를 봉인합니다!

이것은 범위 제어를 얻습니다.

:focus {
    outline:none;
}
::-moz-focus-inner {
    border:0;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}

보낸 사람 : Firefox의 범위 입력 요소에서 점선 윤곽선 제거

이 코드를 사용하여 Firefox 46 및 Chrome 49에서 테스트되었습니다.

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

이전 (흰색 점이 표시됨)

이후 (흰색 점은 보이지 않음)

소수의 입력 필드, 버튼 등에 적용하려면보다 구체적인 코드를 사용하십시오.

input[type=text] {
  outline: none !important;
}

행복한 코딩 !!

선택 상자에이 CSS를 추가하기 만하면됩니다.

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

이것은 나를 위해 잘 작동합니다.

키보드 탐색 및 접근성을 위해 엉망이 될 수 있기 때문에 포커스 개요를 제거하여 수행중인 작업을 실제로 알아야한다고 생각합니다.

디자인 문제로 인해 제거해야하는 경우 :focus 테두리를 더 밝은 색으로 변경하는 것과 같은 다른 시각적 신호로 대체 상태를 버튼에 .

때때로 나는 그 성가신 개요를 꺼내야 할 필요가 있다고 생각하지만, 항상 다른 초점 시각적 신호를 준비합니다.

그리고 js 함수를 사용 하지 마십시오blur() . ::-moz-focus-inner의사 클래스를 사용하십시오 .

대부분의 경우 추가하지 않고 !important CSS 코드에를 하지 않으면 작동하지 않습니다.

따라서 추가하는 것을 잊지 마십시오 !important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

또는 다른 코드 :

button::-moz-focus-inner {
  border: 0 !important;
}

button::-moz-focus-inner { border: 0; }

button비헤이비어를 비활성화하려는 CSS 선택기는 어디에서나 가능합니다.

초점을 제거하는 대신 초점을 강화할 수 있습니다.

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue} 

링크, 버튼 및 입력 요소에서 점선 윤곽선을 제거하십시오.

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

버튼에 테두리가 있고 테두리를 제거 하지 않고 Firefox에서 점선으로 된 윤곽선을 숨기려면 버튼에 여분의 너비가 있어야합니다.

.button::-moz-focus-inner {
    border-color: transparent;
}

CSS 코드는 다음이를 제거하기 위해 노력 :

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

이를 달성하는 유일한 방법은

browser.display.focus_ring_width = 0

about : config 브라우저별로.

이것은 파이어 폭스 v-27.0에서 작동합니다

 .buttonClassName:focus {
  outline:none;
}

위의 많은 옵션을 시도한 후에 다음이 나에게 효과적이었습니다.

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

Bootstrap 3과 함께이 코드를 사용했습니다. 두 번째 규칙 세트는 포커스 / 활성 버튼에 대한 부트 스트랩의 기능을 취소 합니다.

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

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

사용자 정의 CSS 파일은 HTML 코드에서 Bootstrap CSS 파일 다음에 와야합니다.

네 놓치지 마세요! 중요

button::-moz-focus-inner {
 border: 0 !important;
}

button::-moz-focus-inner {border: 0px solid transparent;}CSS를 사용해 볼 수 있습니다 .