두 번 클릭 할 때 div 요소의 강조 표시를 중지하는 방법


93

이 div 요소에 배경 이미지가 있고 두 번 클릭 할 때 div 요소에서 강조 표시를 중지하고 싶습니다. 이것에 대한 CSS 속성이 있습니까?


어떤 브라우저를 사용하고 있습니까? 내 테스트에서 Firefox 5, Chrome 12 또는 IE9에서 강조 할 전체 div를 얻을 수 없었습니다.
tw16 2010 년

답변:


159

아래 CSS는 사용자가 텍스트를 선택할 수 없도록합니다. 라이브 예 : http://jsfiddle.net/hGTwu/20/

-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;

IE9와 Opera를 아래로 타겟팅하려면 html 속성을 unselectable대신 사용해야합니다.

<div unselectable="on">Test Text</div>

전체 div가 강조 표시되는 것을 막지는 못했습니다. 나는 그것이 텍스트만을위한 것임을 알았다. 두 번 클릭 할 때 전체 div가 강조 표시되는 것을 방지하고 싶습니다.
dave

@dave : 더블 클릭이 하이라이트를 일으키는 유일한 시간은 당신이 의미하는 텍스트가있을 때라고 생각했습니다. 반대 투표 할 필요가 없습니다.
tw16 2010 년

1
IE 또는 Opera에서는 작동하지 않습니다. unselectable속성 이 필요 합니다. 그건 -o-user-select그렇고, 없습니다 .
Tim Down

SASS / SCSS 사용자를위한 참고 사항 : 당신이 할 수있는 @include user-select(none);대신 원시 CSS 사용
hilnius을

이상하게도 이로 인해에서도 div를 드래그 할 수있게 draggable = false되었지만 Firefox에서만 가능했습니다.
rovyko

52

이것은 나를 위해 작동합니다

html
{
  -webkit-tap-highlight-color:transparent;
}

이것이 최선의 답이 될 것입니다.
JohnA10 2016-04-26

11
이는 Chrome 및 Safari와 같은 웹킷 브라우저에만 해당되며 IE 또는 Firefox의 모든 버전에서 작동하지 않을 수 있습니다.
Simon East

30

Chrome에서 div 강조 표시를 중지하는 해결책을 찾고 있었고이 게시물로 돌아갔습니다. 그러나 안타깝게도 어떤 답변도 내 문제를 해결하지 못했습니다.

많은 온라인 조사 결과 수정이 매우 간단하다는 것을 알았습니다. 복잡한 CSS가 필요하지 않습니다. 다음 CSS를 웹 페이지에 추가하기 만하면 모든 설정이 완료됩니다. 이것은 노트북과 모바일 화면에서 작동합니다.

div { outline-style:none;}

참고 : 이것은 Chrome 버전 44.0.2403.155m에서 작동했습니다. 또한 다음 URL에 설명 된대로 오늘날의 모든 주요 브라우저에서 지원됩니다 : https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style


8

저는 CSS 전문가는 아니지만 영향을받는 요소의 수를 확장하는 한 tw16의 답변을 사용할 수 있다고 생각합니다. 예를 들어, 이것은 다른 종류의 상호 작용에 영향을주지 않고 내 페이지의 모든 곳에서 강조 표시를 방지합니다.

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

첫 번째 줄은 Paul Irish의 호의입니다 ( http://adamschwartz.co/magic-of-css/chapters/1-the-box/ 를 통해 ).


iOS 13에 PWA가있을 때이 CSS를 사용하지 마십시오. 키보드가 완전히 차단됩니다.
Fer

2

모든 div 요소를 타겟팅합니다.

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

모든 요소를 ​​타겟팅합니다.

::-moz-selection { background:transparent; }
::selection { background:transparent; }

1

사용자 선택 비활성화 :

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

선택한 요소의 배경을 투명하게 설정 :

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

3
이 코드 스 니펫은 질문을 해결할 수 있지만 설명을 포함하면 게시물의 품질을 향상시키는 데 큰 도움이됩니다. 미래에 독자를 위해 질문에 답하고 있으며 해당 사용자는 코드 제안 이유를 모를 수 있습니다.
msrd0 2015 년

0

요소를 클릭 할 수있는 경우 버튼 요소로 만들 수 있습니다.

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