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



5 Answers

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

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

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

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

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

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

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

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

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

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

Question

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



이 문제 :

이것을 사용하십시오 :

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

결과:




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

element:active:focus {
    outline: 0;
}

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




난 그냥 모든 선택하고 개요를 적용하여 페이지의 모든 태그에서 윤곽을 제거 : 아무 것도 모든 :)

*:focus {outline:none}

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

*:focus {outline:none !important}



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

*{
outline: none;
}

또는

*{
outline-style: none;
}



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

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


Related