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

Question

Firefox에서 보기 흉한 점선 초점 윤곽선을 표시하지 않도록 설정할 수 있습니다. 연결 이것으로:

a:focus { 
    outline: none; 
}

그런데 내가 어떻게 이걸 할 수 있지? <button> 태그도요?내가 이것을 할 때 :

button:focus { 
    outline: none; 
}

버튼을 클릭해도 여전히 점선 초점 윤곽선이 표시됩니다.

(예, 이것이 유용성 문제라는 것을 알고 있지만 보기 흉한 회색 점 대신 디자인에 적합한 나만의 초점 힌트를 제공하고 싶습니다.)

Answer 1

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

Answer 2

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

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

그러나 이는 W3C의 접근성 모범 사례를 위반합니다.개요는 키보드를 사용하여 탐색하는 데 도움이 됩니다.

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

Answer 3

CSS를 사용하여 점선 윤곽선을 제거하려는 경우:

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

Answer 4

아래는 LINKS의 경우 공유를 생각한 경우에 효과적이었습니다. 누군가가 관심이 있는 경우를 대비했습니다.

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

건배!

Answer 5

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

Answer 6

[업데이트] 이 솔루션은 더 이상 작동하지 않습니다.나를 위해 일한 솔루션은 이것입니다 https://stackoverflow.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

Answer 7

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

이 코드는 Windows 7의 Firefox 버전 30에서 작동했습니다.아마도 다른 누군가에게 도움이 될 수도 있습니다 :)

button:focus {outline:0 !important;}

Answer 8

CSS를 사용하여 Firefox에서 점으로 표시된 포커스를 제거할 수 있는 방법은 없습니다.

웹 애플리케이션이 작동하는 컴퓨터에 액세스할 수 있는 경우 Firefox의 about:config로 이동하여 설정하세요. browser.display.focus_ring_width 0으로.그러면 Firefox는 점선 테두리를 전혀 표시하지 않습니다.

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

Answer 9

이를 위해 웹에서 많은 솔루션을 찾을 수 있으며 그 중 다수는 작동하지만 강제로 수행하므로 다음을 사용하면 아무것도 강조하거나 집중할 수 없습니다.

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

이것은 약간의 추가 보안을 추가하고 거래를 성사시킵니다!

Answer 10

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

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

전에 (하얀 점이 보입니다)

후에 (흰색 점은 보이지 않습니다)

소수의 입력 필드, 버튼 등에만 적용하고 싶은 경우보다 구체적인 코드를 사용하십시오.

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

즐거운 코딩하세요!!

Answer 11

대부분의 경우 추가하지 않고 !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;
}

Answer 12

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

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

이것은 나에게 잘 작동합니다.

Answer 13

이를 달성하는 유일한 방법은 설정하는 것입니다.

browser.display.focus_ring_width = 0

브라우저별로 about:config에서.

Answer 14

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

어디 button 동작을 비활성화하려는 CSS 선택기가 될 수 있습니다.

Answer 15

없애기보다는 집중을 강화하고 싶을 수도 있습니다.

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

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

Answer 16

포커스 윤곽선을 제거하면 키보드 탐색 및 접근성이 엉망이 될 수 있으므로 실제로 무엇을 하고 있는지 알아야 한다고 생각합니다.

디자인 문제로 인해 빼야 하는 경우에는 :focus 테두리를 더 밝은 색상으로 변경하는 등의 다른 시각적 신호로 이를 대체하는 버튼에 상태를 지정합니다.

때로는 짜증나는 윤곽을 제거해야 할 필요성을 느끼지만 항상 대체 초점 시각적 단서를 준비합니다.

그리고 절대 사용 blur() js 함수.사용 ::-moz-focus-inner 의사 클래스.

Answer 17

링크, 버튼, 입력 요소에서 점선 윤곽선을 제거합니다.

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;
}

Answer 18

버튼에 테두리가 있고 Firefox에서 점선 윤곽선을 숨기고 싶은 경우 없이 테두리를 제거하면 (따라서 버튼의 너비가 추가됩니다) 다음을 사용할 수 있습니다.

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

Answer 19

아래 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;
}

Answer 20

그러면 범위 제어가 이루어집니다.

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

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

Answer 21

당신은 시도 할 수 있습니다 button::-moz-focus-inner {border: 0px solid transparent;} 당신의 CSS에서.

Answer 22

이것은 Firefox v-27.0에서 작동합니다.

 .buttonClassName:focus {
  outline:none;
}

Answer 23

위의 많은 옵션을 시도한 후에 다음만 효과가 있었습니다.

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

Answer 24

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 파일 뒤에 와야 이를 재정의할 수 있습니다.

Answer 25

응 놓치지마 !중요한

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