빠른 클릭 시 Chrome에서 요소가 파란색으로 강조되는 것을 방지하기 위한 방법은 무엇입니까?

빠른 클릭 시 Chrome에서 요소가 파란색으로 강조되는 것을 방지하기 위한 방법은 무엇입니까?

대부분의 경우 저는 그것에 대해 걱정하지 않지만 저는 이미지 회전판을 가지고 있고 제가 다음과 이전의 div를 빠르게 클릭하면 그것들은 크롬에서 강조 표시됩니다.

저는 아웃라인을 사용해 보았습니다: 없음이지만 효과는 없습니다.해결책이 있습니까?

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

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

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

-webkit-tap-highlight-color: transparent;

액세스 가능성에 영향을 미칠 수 있습니다. outlinenone.com 을 참조하십시오.

이를 위해 순수 CSS를 사용할 수 있습니다.다음은 첫 번째 줄과 마지막 줄에 크롬이 적용되는 멀티 브라우저 지원에 대한 개요입니다.:focus비트. 자세한 내용은 아래에 있습니다.

.noSelect {
    -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;
}
.noSelect:focus {
    outline: none !important;
}

간단히 추가합니다.class="noSelect"이 클래스를 적용할 요소의 속성입니다.저는 이 CSS 솔루션을 사용해보는 것을 강력히 추천합니다.자바스크립트 사용을 제안하는 사람도 있지만, 이것이 가장 깨끗한 해결책이라고 생각합니다.

Android/Safari 모바일/Edge용

-webkit-tap-highlight-color: transparent;이 추가 규칙을 찾을 수 있습니다.크롬 데스크톱(특히 터치스크린 사용) 및 모바일 장치에 영향을 미칩니다.다음은 이 비표준 속성을 사용하는 것에 대한 경고이며 제안 사항과 관련된 몇 가지 접근성 문제입니다.가장 좋은 방법은 하이라이트를 자신만의 스타일로 바꾸는 것입니다.

업데이트: 이후 버전의 Chrome...

이 답변에 대한 논평자는 지적했습니다.:focus { outline: none !important;}최신 버전의 Chrome에 필요합니다.이것도 포함하도록 수정된 답입니다!아, 끊임없이 변화하는 기준.

저는 크롬 버전 60을 실행하고 있는데 이전 CSS 답변이 하나도 작동하지 않았습니다.

Chrome이 다음을 통해 파란색 하이라이트를 추가하는 것을 발견했습니다.outline스타일. 다음의 CSS를 추가하는 것이 나를 위해 그것을 고쳤습니다.

:focus {
    outline: none !important;
}

하지만, 가끔, 심지어는user-select그리고.touch-callout꺼짐,cursor: pointer;이 효과를 유발할 수 있으니, 그냥 설정하세요.cursor: default;효과가 있을 겁니다

모바일에서 파란색 오버레이를 제거하려면 다음 중 하나를 사용할 수 있습니다.

-webkit-tap-highlight-color: transparent; /* transparent with keyword */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* transparent with rgba */
-webkit-tap-highlight-color: hsla(0,0,0,0); /* transparent with hsla */
-webkit-tap-highlight-color: #00000000; /* transparent with hex with alpha */
-webkit-tap-highlight-color: #0000; /* transparent with short hex with alpha */

그러나 다른 속성과 달리 사용할 수 없습니다.

-webkit-tap-highlight-color: none; /* none keyword */

DevTools에서는 이 값이 '잘못된 속성 값' 등으로 표시됩니다.

---

초점을 맞출 때 파란색/검은색/주황색 윤곽선을 제거하려면 다음을 사용합니다.

:focus {
    outline: none; /* no outline - for most browsers */
    box-shadow: none; /* no box shadow - for some browsers or if you are using Bootstrap */
}

제가 제한이는을 box-shadow이는 Bootsrap(및 일부 브라우저)에서 포커스가 있는 요소에 추가할 때가 있으므로 이를 사용하여 제거할 수 있기 때문입니다.

하지만 키보드로 탐색하는 사람이 있다면, 그들은 실제로 매우 혼란스러울 것입니다. 왜냐하면 그들은 탐색하기 위해 이 개요에 의존하기 때문입니다.대신 교체할 수 있습니다.

:focus {
    outline: 100px dotted #f0f; /* 100px dotted pink outline */
}

---

다음을 사용하여 모바일에서 탭을 대상으로 지정할 수 있습니다.:hover또는:active도 있어요.아니면 헷갈릴 수도 있습니다.

---

전체 코드:

element {
    -webkit-tap-highlight-color: transparent; /* remove tap highlight */
}
element:focus {
    outline: none; /* remove outline */
    box-shadow: none; /* remove box shadow */
}

---

기타 정보:

• 를 사용자 과 같이 하십시오.-webkit-tap-highlight-color 때 요소가 해야 합니다.
• 포커스가 있는 요소에서 윤곽선을 제거하거나 요소에 스타일을 추가하지 마십시오.
• -webkit-tap-highlight-color는 브라우저 지원을 제대로 받지 못했으며 표준 버전도 아닙니다.그래도 사용할 수 있지만, 조심하세요!

가 있었어요.<input type="range" />그리고 저는 그것을 해결했습니다.

-webkit-tap-tap-color: 투명;

input[type="range"]{
  -webkit-tap-highlight-color: transparent;
}

 <input type="range" id="volume" name="demo"
         min="0" max="11">
  <label for="volume">Demo</label>

해당 요소에서 선택 이벤트에 대한 핸들러를 만들어 보십시오. 핸들러에서 선택 항목을 지울 수 있습니다.

이것을 확인해 보십시오.

JavaScript를 사용하여 텍스트 선택 지우기

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

이 방법이 가장 적합합니다.

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

언급URL : https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic