Chrome의 CSS 맞춤 스타일 버튼에서 파란색 테두리 제거

웹 페이지에서 작업 중이며 사용자 정의 스타일 <button>태그가 필요합니다. CSS로 다음과 같이 말했습니다 border: none. 이제 사파리에서 완벽하게 작동하지만 크롬에서는 버튼 중 하나를 클릭하면 주위에 성가신 파란색 테두리가 나타납니다. 나는 생각 button:active { outline: none }하거나 button:focus { outline:none }작동하지만 둘 다하지 않습니다. 어떤 아이디어?

이것은 클릭하기 전의 모습이며 클릭 후 여전히 보이기를 원하는 방식입니다.

그리고 이것은 내가 말하는 경계입니다.

내 CSS는 다음과 같습니다.

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

이렇게하면 사이트 의 액세스 가능성 이 낮아 지므로 권장하지 않습니다 . 자세한 내용은이 게시물을 참조하십시오 .

즉, 주장하면이 CSS가 작동해야합니다.

button:focus {outline:0;}

확인하거나 JSFiddle : http://jsfiddle.net/u4pXu/

또는이 스 니펫에서 :

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

기다림! 그 추악한 개요에 대한 이유가 있습니다!

그 추악한 파란색 윤곽선을 제거하기 전에 접근성 을 고려할 수 있습니다. 기본적으로 해당 파란색 윤곽선은 포커스 가능한 요소에 배치됩니다. 접근성 문제가있는 사용자는 해당 단추를 탭하여 해당 단추에 초점을 맞출 수 있습니다. 일부 사용자는 마우스를 사용할 수있는 운동 능력이 없으며 컴퓨터 상호 작용을 위해 키보드 (또는 다른 입력 장치) 만 사용해야합니다. 파란색 윤곽선을 제거하면 더 이상 초점이 맞춰진 요소에 대한 시각적 표시기가 없습니다. 당신이 파란색 테두리를 제거하려는 경우, 당신은 해야 버튼이 집중되는 것을 시각적으로 표시 다른 종류로 교체하십시오.

가능한 해결책 : 초점이 맞았을 때 어둡게 버튼

아래 예에서는 Chrome의 파란색 윤곽선을 사용하여 먼저 제거했습니다. button:focus { outline:0 !important; }

기본 부트 스트랩 버튼은 다음과 같이 정상적으로 나타납니다.

포커스를받을 때의 버튼은 다음과 같습니다.

여기 버튼을 누를 때

보시다시피 버튼이 초점을 받으면 약간 어두워집니다. 개인적으로, 버튼의 초점 상태와 버튼의 정상 상태 사이에 눈에 띄는 차이가 생기도록 초점 버튼을 더 어둡게 만드는 것이 좋습니다.

장애인 사용자만을위한 것이 아닙니다

사이트의 접근성을 높이는 것은 종종 간과되지만 웹 사이트에서보다 생산적인 환경을 만드는 데 도움이 될 수 있습니다. 키보드를 계속 사용하기 위해 키보드 명령을 사용하여 웹 사이트를 탐색하는 많은 일반 사용자가 있습니다.

모든 것을 선택하고 outline : none을 모든 항목에 적용하여 페이지의 모든 태그에서 개요를 제거합니다.)

*:focus {outline:none}

bagofcole이 언급했듯이! important를 추가해야 할 수도 있으므로 스타일은 다음과 같습니다.

*:focus {outline:none !important}

이 문제의 나의 경우에 나는 지정해야했다 box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

!important더 나은 결과를 얻으려면 선언을 잊지 마십시오

button:focus {outline:0 !important;}

! important 속성이있는 규칙은 규칙이 CSS 문서에서 나타나는 위치에 관계없이 항상 적용됩니다.

제거 outline접근성에 대한 끔찍한입니다! 사용자 가 키보드를 사용하려는 경우에만 초점 링이 표시되는 것이 이상적 입니다.

: focus-visible을 사용하십시오 . 현재 CSS를 사용하여 키보드 전용 포커스를 스타일링하기위한 W3C 제안이며 Firefox ( caniuse ) 에서 지원됩니다 . 다른 주요 브라우저에서 지원할 때까지이 강력한 폴리 필을 사용할 수 있습니다 .

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

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

더 많은 정보가 필요한 경우를 대비 하여 더 자세한 게시물을 작성했습니다 .

이것을 CSS 파일에 추가하십시오.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

다음 중 하나를 사용하십시오.

:active {
    outline:none;
}

또는 작동하지 않는 경우 :

:active {
   outline:none !important;
}

이것은 나를 위해 작동합니다 (적어도 FF 및 Chrome). :focus상태 를 타겟팅하는 대신 상태 만 타겟팅하면 :active사용자가 링크를 클릭 할 때 브라우저에서 미적으로 눈에 띄는 강조 표시가 제거됩니다. 그러나 장애가있는 사용자가 탭을 이동하거나 탭을 이동할 때 여전히 포커스 상태를 유지합니다. 두 당사자 모두 행복합니다. :)

이 문제의 경우 :

이것을 사용하십시오 :

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

결과:

부트 스트랩을 사용 하고이 문제가있는 사람은 : active : focus와 : active 및 : focus를 사용하므로 다음이 필요합니다.

element:active:focus {
    outline: 0;
}

희망적으로 누군가를 알아내는 데 시간을 절약하고 그러한 간단한 일이 왜 효과가 없는지 궁금해하기 위해 내 머리를 부딪쳤다.

Bootstrap 4.1 및 다른 버전을 사용하는 경우 대부분의 솔루션이 작동하지 않습니다. 많은 헤드 뱅잉 후, 나는 당신이 그림자 없음 클래스 를 적용해야한다는 것을 발견했습니다 .

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

이것이 나를 위해 일한 것입니다.

button:focus {
    box-shadow:none;
}

Chrome 및 기타 브라우저에 대한 수정

button:focus { outline: none !important; box-shadow: none !important; }

파란색 테두리 문제가있는 모든 요소에 대해이 코드를 시도하십시오.

*{
outline: none;
}

또는

*{
outline-style: none;
}

아직 언급되지 않은 접근성 문제 를 해결하는 또 다른 방법 은 약간의 Javascript를 사용하는 것 입니다. 크레딧은 hackernoon의 다음과 같은 통찰력있는 블로그 게시물입니다. https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

: 여기 방법은 정말 간단하면서도 효과적인 클래스를 추가 . 사람들이 다시 마우스로의 전환이 그런 다음 중 하나를 디스플레이에 초점 윤곽이 클래스를 사용하거나 할 수없는 경우 페이지를 탐색 (선택적으로 제거하기 위해 탭 키를 사용하여 시작할 때 .

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

나는 같은 문제에 직면하여 간단한 CSS를 사용했다.

.custom-button {
    outline: none
}

입력에서 동일한 효과를 삭제하려면 다음 코드와 버튼을 추가하십시오.

input:focus {outline:0;}

모든 최신 브라우저가 지원 CSS 선택기 시작까지 : 포커스 볼을 ,
에 간단하고 아마도 가장 좋은 방법 저장 접근성 이 까다로운 포커스를 제거하는 것입니다 마우스가 사용자를 위해 그것을 저장 키보드 사용자를위한 :

1.이 작은 polyfill (약 10kb)을 사용하십시오 : https://github.com/WICG/focus-visible
2. CSS 어딘가에 다음 코드를 추가하십시오 :

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

css4-selector의 브라우저 지원 : 현재 초점이 매우 약합니다 :
https://caniuse.com/#search=focus-visible

간단히 쓰십시오 outline:none;. 의사 요소를 사용할 필요가 없습니다focus

이것은 Chrome 제품군의 문제이며 영원히 존재했습니다.

https://bugs.chromium.org/p/chromium/issues/detail?id=904208 버그가 발생했습니다

여기에 표시 될 수 있습니다 : 버튼과 같은 것에 테두리를 추가하자마자 https://codepen.io/anon/pen/Jedvwj 크롬이 엉망입니다. 마우스로 클릭 할 때 포커스 상태를 설정합니다.

https://github.com/wicg/focus-visible 이 수정 프로그램을 사용하는 것이 좋습니다 .

그냥 다음을 수행

npm install --save focus-visible

HTML에 스크립트를 추가하십시오.

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

webpack 또는 이와 유사한 것을 사용하는 경우 기본 항목 파일로 가져 오기

import 'focus-visible/dist/focus-visible.min';

그런 다음 이것을 CSS 파일에 넣으십시오.

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

당신 은 단지 설정할 수 있습니다 :

button:focus {outline:0;}

그러나 많은 사용자가있는 경우 마우스를 사용할 수 없거나 키보드를 속도로 사용하려는 사용자에게는 불리합니다.

부트 스트랩과 같은 문제가있었습니다. 윤곽선과 상자 그림자로 해결했습니다.

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}