두 번 클릭 할 때 div 요소의 강조 표시를 중지하는 방법
이 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에 설명 된대로 오늘날의 모든 주요 브라우저에서 지원됩니다. http://www.w3schools.com/cssref/pr_outline-style.asp
저는 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; }
'developer tip' 카테고리의 다른 글
Perl : 문자열 선행 및 후행 공백을 제거하는 기능 (0) | 2020.10.11 |
---|---|
Android WebView에서 JavaScript 경고가 작동하지 않음 (0) | 2020.10.11 |
Python : 수퍼 클래스에서 서브 클래스를 만들려면 어떻게해야합니까? (0) | 2020.10.11 |
Visual Studio가 자동 단축키 전에 주요 이벤트를 포착하는 이유는 무엇입니까? (0) | 2020.10.11 |
속성 이름에 대한 변수를 사용하여 객체 생성 (0) | 2020.10.11 |