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

대부분의 브라우저에서 이것은 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)에서는 전체 문서를 선택 불가능하게하지 않고 선택 불가능한 요소 이전에 시작하여 끝나는 선택을 막을 수 없습니다.

답변

onselectstart="return false;"

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

.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>

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