google-chrome 크롬 focus - Chrome의 CSS 맞춤 스타일 버튼에서 파란색 테두리 제거





7 Answers

기다림! 그 추한 윤곽을 그리는 이유가 있습니다!

그 추한 파란색 외곽선을 제거하기 전에 접근성 을 고려해야 할 수도 있습니다. 기본적으로 파란 윤곽선은 포커스 가능 요소에 배치됩니다. 이는 접근성 문제가있는 사용자가 탭을 탭하여 해당 버튼을 집중시킬 수 있도록하기위한 것입니다. 일부 사용자는 마우스를 사용할 수있는 운동 능력이 없으며 컴퓨터 상호 작용을 위해 키보드 (또는 다른 입력 장치) 만 사용해야합니다. 파란 윤곽선을 제거하면 더 이상 어떤 요소에 포커스가 있는지에 대한 시각적 표시기가 없습니다. 파란 윤곽선을 제거하려면 단추에 포커스가있는 다른 유형의 시각적 표시로 바꿔야합니다.

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

아래의 예에서 Chrome의 파란색 외곽선은 button:focus { outline:0 !important; } button:focus { outline:0 !important; }

다음은 정상적으로 나타나는 기본 부트 스트랩 버튼입니다.

포커스를받는 버튼은 다음과 같습니다.

버튼을 눌렀을 때의 버튼입니다.

보시다시피, 단추는 초점을받을 때 조금 더 어둡습니다. 개인적으로 초점이 맞춰진 단추를 더 어둡게 만들어 초점을 맞춘 상태와 단추의 정상 상태 사이에 눈에 띄는 차이가 있도록하는 것이 좋습니다.

장애인을위한 것은 아닙니다.

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

꾸미기 초기화 코드

웹 페이지에서 작업 중이며 사용자 정의 스타일의 <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;
}



!important 결과를 위해 !important 선언을 잊지 마라 !important

button:focus {outline:0 !important;}

! important 속성을 가진 규칙은 CSS 문서에서 해당 규칙이 어디에 나타나더라도 항상 적용됩니다.




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

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



부트 스트랩을 사용하고이 문제가있는 사람은 다음을 사용합니다 : 활성 : 초점 : 활성 : 초점 : 필요하므로 다음을 수행하십시오.

element:active:focus {
    outline: 0;
}

희망을 갖고 누군가를 구해서 시간을 절약 해주었습니다. 그런 간단한 일이 왜 작동하지 않는지 궁금해했습니다.




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

button:focus {
    box-shadow:none;
}



이 문제 :

이것을 사용하십시오 :

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

결과:




모든 최신 브라우저가 지원을 시작할 때까지 css-selector : focus-visible ,
접근성저장 하는 가장 간단하고 가능성있는 방법 은 마우스 사용자에게만 이 까다로운 포커스를 제거 하고 키보드 사용자 를 위해 저장하는 것 입니다 .

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

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

css4-selector의 브라우저 지원 : focus-visible 바로 지금 매우 약함 :
https://caniuse.com/#search=focus-visible




Related