it-swarm-ko.tech

링크뿐만 아니라 BUTTONS에서 도트 파이어 폭스를 제거하는 방법?

파이어 폭스에 초점이 맞지 않는 점선을 표시하지 않게 할 수 있습니다. 모래밭 이걸로 :

a:focus { 
    outline: none; 
}

하지만 <button> 태그에도이 작업을 어떻게 수행 할 수 있습니까? 내가 이것을 할 때 :

button:focus { 
    outline: none; 
}

버튼을 클릭하면 버튼에 초점이 맞춰집니다.

(그리고 네, 이것이 유용성 문제라는 것을 알고 있습니다 만, 나는 못생긴 회색 점들 대신에 디자인에 적절한 포커스 힌트를 제공하고 싶습니다)

459
Edward Tanguay
button::-moz-focus-inner {
  border: 0;
}
686
user27656

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

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

그러나 이는 W3C의 접근성 모범 사례에 위배됩니다. 개요는 키보드로 탐색하는 데 도움이됩니다.

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

280
Anderson Custódio

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

아래의 내용은 누군가가 관심을 가지고있는 경우를 대비하여 링크의 경우 공유를 생각한 경우에 유용했습니다.

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

건배!

42
foxybagga
:focus, :active {
    outline: 0;
    border: 0;
}
22
blizzyx

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

올바른 답변은 Firefox 24.0에서 작동하지 않습니다.

버튼과 앵커 태그에서 파이어 폭스의 점선으로 된 윤곽선을 제거하려면 아래 코드를 추가하십시오.

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

9
Renato Carvalho

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

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

button:focus {outline:0 !important;}
7
Vartox

이것에 대한 많은 해결책이 웹상에서 찾아 볼 수 있습니다. 그 중 많은 기능이 작동하지만 강제로이 기능을 사용하면 다음을 사용하면 아무 것도 강조/집중할 수 없습니다.

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

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

5
Shannon Hochkins

CSS를 사용하여 Firefox에서 이러한 점선으로 된 초점을 제거 할 수있는 방법은 없습니다.

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

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

5
Vitaly Sharovatov

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

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

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

4
Abhay Singh

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

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

이전 (흰색 점이 보임)

input with white dots

(흰색 점이 보이지 않음) enter image description here

몇 가지 입력 필드, 버튼 등에 만 적용하려면보다 구체적인 코드를 사용하십시오.

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

해피 코딩 !!

4
Madan Sapkota

대부분의 경우 !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;
}
3
herci

초점을 없애기보다 집중하기를 원할 수도 있습니다.

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

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

버튼에 테두리가 있고 Firefox에서 테두리가있는 외곽선 을 숨기려면 테두리를 제거하지 않고 (따라서 버튼의 추가 너비) 다음을 사용할 수 있습니다.

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

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

browser.display.focus_ring_width = 0

about : config는 브라우저별로 설정합니다.

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

여기서 button은 동작을 비활성화하려는 CSS 선택기 일 수 있습니다.

2
wavded

포커스 개요를 제거하면 키보드 탐색 및 접근성을 망칠 수 있기 때문에 실제로 무엇을하는지 알고 있어야한다고 생각합니다.

디자인 문제로 인해 문제를 해결해야하는 경우 버튼에 :focus 상태를 추가하여 테두리를 밝은 색상이나 그와 비슷한 것으로 변경하는 것과 같은 다른 시각적 신호로 바꿉니다.

때로는 그 성가신 개요를 꺼내야 할 필요성을 느낍니다. 그러나 나는 항상 대체 초점 시각적 큐를 준비합니다.

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

2
Flatline

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

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

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;
}
2
Fizer Khan

이것은 범위 컨트롤을 얻을 것이다 :

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

From : Firefox의 범위 입력 요소에서 점선으로 된 윤곽선을 제거하십시오

2
bob

그래, 놓치지 마세요 ! important

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

위의 여러 가지 옵션을 시도한 후 다음 작업 만 수행되었습니다.

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

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

0
usual

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

 .buttonClassName:focus {
  outline:none;
}
0
star18bit

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 파일 다음에 와야합니다.

0
Ehsan88