이 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>
unselectable
속성 이 필요 합니다. 그건 -o-user-select
그렇고, 없습니다 .
@include user-select(none);
대신 원시 CSS 사용
draggable = false
되었지만 Firefox에서만 가능했습니다.
이것은 나를 위해 작동합니다
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 {
-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; }