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


83

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;

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

답변:



87

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

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


"위의 대답은"어떤 응답 대체 명확히하십시오
니마 Derakhshanjan

1
왜 사용이 rgba(0,0,0,0)대신rgba(255,255,255,0)
Gaurav 가르 왈

1
@GauravAggarwal 알파 공간이 의미가 있으므로 rgba (0,0,0,0)과 rgba (255,255,255,0) 사이에는 차이가 없습니다.
Oboo Cheng

4
어쨌든 transparent로 재정의하려는 경우 rgba 선언이있는 이유는 무엇입니까? 이 속성에서 transparent 키워드를 지원하지 않는 WebKit 버전이 있습니까?
BoltClock

4
@BoltClock. MDN 문서 에서 '투명한'키워드를 찾을 수 없으므로 표준이 아닌 것 같습니다.이 질문에 대답 하기 전에이 기사를 읽었습니다 . ** Christian Cook **이 왔기 때문에 이것을 추가하라는 의견 조언 일부 sumsung 장치에 문제가 있습니다. 특정 장치의 버그라고 생각합니다.
Oboo Cheng

12

이를 스타일 시트에 추가 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;

}

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


1

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

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

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.