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

Program / 글쓴이

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

답변

아래 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>

답변

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

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

답변

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

답변

저는 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/ 를 통해 ).

답변

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

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

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

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

답변

사용자 선택 비활성화 :

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; }

답변

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