[css] 어쨌든 빠르게 클릭 할 때 Chrome에서 요소의 파란색 강조 표시를 방지하려면?

Program / 글쓴이

대부분의 경우 걱정하지 않지만 이미지 캐 러셀이 있으며 다음 및 이전 div를 빠르게 클릭하면 Chrome에서 강조 표시됩니다.

나는 outline : none을 사용해 보았지만 효과는 없었다. 거기에 해결책이 있습니까?

답변

선택 항목을 “지우기”위해 JavaScript를 사용하여 텍스트 선택을 지우는 Floremin 에서 제공 하는 링크 외에도 순수 CSS를 사용하여이를 수행 할 수도 있습니다. CSS가 여기 있습니다 …

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

class="noSelect"이 클래스를 적용하려는 요소에 속성을 추가하기 만하면 됩니다. 이 CSS 솔루션을 사용해 보는 것이 좋습니다. JavaScript를 사용하는 데 아무런 문제가 없습니다. 저는 이것이 잠재적으로 더 쉬울 수 있다고 믿고 코드에서 약간의 정리를 할 수 있습니다.

Android의 Chrome
-webkit-tap-highlight-color: transparent; 은 Android 지원을 위해 실험 해 볼 수있는 추가 규칙입니다.

답변

Android 용 Chrome의 경우 -webkit-tap-highlight-color CSS 속성을 사용할 수 있습니다 .

-webkit-tap-highlight-color는 탭하는 동안 링크 위에 표시되는 강조 표시의 색상을 설정하는 비표준 CSS 속성입니다. 강조 표시는 사용자에게 탭이 성공적으로 인식되고 있음을 나타내며 탭한 요소를 나타냅니다.

강조 표시를 완전히 제거하려면 값을 transparent다음과 같이 설정할 수 있습니다 .

-webkit-tap-highlight-color: transparent;

이것이 접근성에 영향을 미칠 수 있다는 점에 유의하십시오 : outlinenone.com 참조

답변

Chrome 버전 60을 실행 중이며 이전 CSS 답변 중 어느 것도 작동하지 않았습니다.

Chrome이 outline스타일을 통해 파란색 강조 표시를 추가하고 있음을 발견했습니다 . 다음 CSS를 추가하면 문제가 해결되었습니다.

:focus {
    outline: none !important;
}

답변

그러나, 때로는 심지어로 user-select하고 touch-callout, 꺼져 cursor: pointer;이 효과를 일으킬 수 있으므로, 단지 설정 cursor: default;과 작동합니다.

답변

해당 요소에 대해 select 이벤트에 대한 처리기를 만들어보십시오. 처리기에서 선택을 지울 수 있습니다.

이것 좀보세요 :

JavaScript로 텍스트 선택 지우기

선택을 지우는 예입니다. 필요한 특정 요소에서만 작동하도록 수정하기 만하면됩니다.

답변

이것은 나를 위해 가장 잘 작동합니다.

.noSelect:hover {
  background-color: white;
}

답변