[html] 커서 : 포인터로 개체를 터치 / 누를 때 파란색 강조 표시 비활성화

Program / 글쓴이

cursor : pointer 속성이 적용된 Div가 Chrome에서 터치 될 때마다 나타나는 파란색 강조 표시가 있습니다. 어떻게 제거 할 수 있습니까?

나는 다음을 시도했다 :

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

그러나 커서를 누를 때 파란색 강조 표시에는 영향을주지 않습니다.

답변

-webkit-tap-highlight-color:  rgba(255, 255, 255, 0);

하이라이트 색상을 투명하게 설정하므로 문제를 해결합니다.

출처 : http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/

답변

내가 아는 한 Vlad K의 답변은 일부 Android 기기에서 문제를 일으킬 수 있습니다.

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;

스 니펫 확장

답변

이를 스타일 시트에 추가 class="no_highlights"하고이 클래스를 적용하려는 요소에 속성을 추가하기 만하면 됩니다.

no_highlights{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

또는 클래스 이름을 제거하고이를 수행하여 모든 요소에 대해 전역 적으로이를 수행 할 수 있습니다. 

button,
textarea,
input,
select,
a{
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-tap-highlight-color: transparent;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
  user-select: none;

}

감사합니다 🙂 어쨌든. 파란색 테두리는 접근성 기능으로 있습니다. 보기에는 좋지 않지만 가장 필요한 사람에게 도움이됩니다.

답변

문서 에 따르면 간단하게 다음과 같이 할 수 있습니다.

-webkit-tap-highlight-color: transparent; /* for removing the highlight */

Android 용 Chrome 68 및 Windows 용 Chrome 80에서 작동합니다.

답변