링크뿐만 아니라 버튼에서 파이어폭스의 점선 아웃라인을 제거하는 방법은 무엇입니까?

링크뿐만 아니라 버튼에서 파이어폭스의 점선 아웃라인을 제거하는 방법은 무엇입니까?

파이어폭스가 다음 링크에 보기 흉한 점선 포커스 개요를 표시하지 않도록 할 수 있습니다.

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://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

여기서 대부분의 답을 시도해 봤지만, 아무 것도 저에게 효과가 없었습니다.크롬에서도 버튼의 파란색 아웃라인을 없애야 한다는 것을 깨달았을 때, 저는 다른 해결책을 찾았습니다.Chrome의 CSS 사용자 지정 스타일 단추에서 파란색 테두리 제거

이 코드는 Windows 7의 Firefox 버전 30에서 작동했습니다.아마도 그것은 밖에 있는 다른 누군가를 도울 수도 있습니다 :)

button:focus {outline:0 !important;}

그러면 범위 제어가 수행됩니다.

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

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

CSS를 사용하여 파이어폭스에서 이러한 점선 초점을 제거할 수 있는 방법은 없습니다.

웹 응용 프로그램이 작동하는 컴퓨터에 액세스할 수 있는 경우 정보로 이동합니다. Firefox의 구성 및 설정browser.display.focus_ring_width0으로. 그러면 Firefox는 점선 테두리를 전혀 표시하지 않습니다.

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

이에 대한 많은 해결책이 웹에서 발견되었으며, 그 중 많은 해결책이 작동하지만, 한 번 사용하면 어떤 것도 강조하거나 집중할 수 없도록 강제하는 것은 다음과 같습니다.

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

이것은 단지 약간의 보안을 추가하고 거래를 성사시킬 뿐입니다!

이 코드를 사용하여 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다른 시각적 신호로 대체하는 버튼에 대해 설명합니다. 테두리를 더 밝은 색으로 바꾸는 것과 같은 것입니다.

가끔 저는 그 짜증나는 윤곽을 제거해야 할 필요성을 느끼지만, 저는 항상 다른 초점 시각적 단서를 준비합니다.

절대 사용하지 마십시오.blur()function.js 수용을 합니다.::-moz-focus-inner사이비 계급

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

그서말추잊지고가세요하래요세추▁add하▁to▁so가▁forget말▁not▁do를 추가하는 것을 잊지 마세요.!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; }

에▁where디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

브라우저 단위로 구성합니다.

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

 .buttonClassName:focus {
  outline:none;
}

위에서 많은 옵션을 시도해 본 결과, 저는 다음과 같은 방법만 가능했습니다.

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

부트스트랩 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 코드의 부트스트랩 CSS 파일 뒤에 와야 재정의할 수 있습니다.

네, 놓치지 마세요! 중요합니다.

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

시도해 보세요button::-moz-focus-inner {border: 0px solid transparent;}당신의 CSS에.

언급URL : https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links