[css] 텍스트 선택 강조 표시를 비활성화하는 방법

스택 오버플로 페이지 맨 위에있는 단추 (예 : 질문 , 태그 , 사용자 등) 또는 탭 처럼 작동하는 앵커 또는 사용자가 실수로 텍스트를 선택한 경우 강조 효과를 비활성화하는 CSS 표준 방법이 있습니까?

JavaScript 로이 작업을 수행 할 수 있으며 약간의 인터넷 검색으로 Mozilla 전용 -moz-user-select옵션이 생성되었습니다.

CSS를 사용하여 표준을 준수하는 방법이 있습니까? 그렇지 않은 경우 “모범 사례”접근 방식은 무엇입니까?



답변

2017 년 1 월 업데이트 :

에 따르면 캔 I 사용 의는 user-select현재 인터넷 익스플로러 9 이전 버전 (그러나 슬프게도를 제외한 모든 브라우저에서 지원됩니다 여전히 공급 업체 접두사를 필요).


올바른 CSS 변형은 모두 다음과 같습니다.

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


user-select(현재의 표준화 과정에 W3C의 작업 초안 ). 모든 곳에서 작동한다고 보장 할 수는 없으며 브라우저마다 구현에 차이가있을 수 있으며 향후 브라우저에서 지원을 중단 할 수 있습니다.


자세한 내용은 Mozilla Developer Network 설명서를 참조하십시오 .


답변

대부분의 브라우저에서 이것은 CSS user-select속성 에 대한 독점적 변형을 사용하여 달성 할 수 있으며 , 원래 CSS 3에서 제안 된 다음 포기되었으며 이제 CSS UI 레벨 4 에서 제안됩니다 .

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Internet Explorer <10 및 Opera <15 unselectable의 경우 선택할 수없는 요소 의 속성 을 사용해야합니다 . HTML의 속성을 사용하여이를 설정할 수 있습니다.

<div id="foo" unselectable="on" class="unselectable">...</div>

안타깝게도이 속성은 상속되지 않습니다. 즉, 안에있는 모든 요소의 시작 태그에 속성을 넣어야합니다 <div>. 이것이 문제라면, 대신 자바 스크립트를 사용하여 요소의 자손에 대해 재귀 적으로이를 수행 할 수 있습니다.

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

2014년 4월 30일 업데이트 : 새로운 요소가 트리에 추가 될 때마다 다시 실행을 할이 트리 탐색 요구를하지만, 추가하여이를 방지 할 수 있음을 @Han에 의해 코멘트에서 보이는 mousedown이벤트 핸들러를 그 집합 unselectable의 대상에 행사. 자세한 내용은 http://jsbin.com/yagekiji/1 을 참조하십시오.


이것은 여전히 ​​모든 가능성을 다루지는 않습니다. 선택 불가능한 요소에서 선택을 시작하는 것은 불가능하지만 일부 브라우저 (예 : Internet Explorer 및 Firefox)에서는 전체 문서를 선택 불가능하게하지 않고 선택 불가능한 요소 이전에 시작하여 끝나는 선택을 막을 수 없습니다.


답변

Internet Explorer 용 JavaScript 솔루션은 다음과 같습니다.

onselectstart="return false;"


답변

CSS 3의 사용자 선택 속성을 사용할 수 있을 때까지 Gecko 기반 브라우저는 -moz-user-select이미 찾은 속성을 지원합니다 . WebKit 및 Blink 기반 브라우저는-webkit-user-select 특성을 .

물론 Gecko 렌더링 엔진을 사용하지 않는 브라우저에서는 지원되지 않습니다.

“표준”을 준수하는 빠르고 쉬운 방법은 없습니다. JavaScript를 사용하는 것이 옵션입니다.

실제 질문은 왜 사용자가 특정 요소를 강조 표시하고 아마도 복사하여 붙여 넣을 수 없도록 하시겠습니까? 사용자가 내 웹 사이트의 특정 부분을 강조 표시하지 못하도록 한 번도 오지 않았습니다. 내 친구들 중 일부는 코드를 읽고 쓰는 데 많은 시간을 보낸 후 강조 표시 기능을 사용하여 페이지의 위치를 ​​기억하거나 마커를 제공하여 눈이 다음에 볼 위치를 알 수 있도록합니다.

이것이 유용하다는 것을 알 수있는 유일한 장소는 사용자가 웹 사이트를 복사하여 붙여 넣을 때 복사하여 붙여 넣을 수없는 양식의 단추가있는 경우입니다.


답변

<p>요소를 제외한 모든 항목에서 텍스트 선택을 비활성화 하려면 CSS 에서이 작업을 수행 할 수 있습니다 ( -moz-none하위 요소에서 재정의를 허용하는 하위 요소를 살펴보십시오 none.

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}


답변

이전 답변의 솔루션에서 선택이 중지되었지만 커서가 여전히 변경되어 사용자는 여전히 텍스트를 선택할 수 있다고 생각합니다. 정적으로 유지하려면 CSS 커서를 설정해야합니다.

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

그러면 데스크톱 응용 프로그램에서와 같이 텍스트가 완전히 평평 해집니다.


답변

Firefox와 Safari에서도 가능합니다 (Chrome도?)

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