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

스택 오버플로 페이지 맨 위에있는 단추 (예 : 질문 , 태그 , 사용자 등) 또는 탭 처럼 작동하는 앵커 또는 사용자가 실수로 텍스트를 선택한 경우 강조 효과를 비활성화하는 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; }

WebKit에 대한 해결 방법 :

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

CardFlip 예제에서 찾았습니다.

나는 하이브리드 CSS + jQuery 솔루션을 좋아한다.

내부의 모든 요소를 <div class="draggable"></div>선택 불가능하게하려면 다음 CSS를 사용하십시오.

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.draggable input {
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
         -o-user-select: text;
            user-select: text;
 }

그런 다음 jQuery를 사용하는 경우 이것을 $(document).ready()블록 안에 추가하십시오 .

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

나는 여전히 입력 요소가 상호 작용할 수 있기를 원하므로 :not()의사 선택기 가 필요하다고 생각합니다 . 당신은 사용할 수 있습니다'*'신경 쓰지 않으면 대신 .

주의 사항 : Internet Explorer 9에는이 추가 jQuery 조각이 필요하지 않을 수 있으므로 거기에 버전 확인을 추가 할 수 있습니다.

.hidden:after {
    content: attr(data-txt);
}

<p class="hidden" data-txt="Some text you don't want to be selected"></p>

그러나 가장 좋은 방법은 아닙니다.

CSS 또는 JavaScript를 사용할 수 있습니다 를 .

자바 스크립트 방법은 지원됩니다 나이가 같은 브라우저 오래된 뿐만 아니라 Internet Explorer 버전하지만 사건이 아니라면, 다음 CSS 방법을 사용합니다 :

HTML / 자바 스크립트 :

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML / CSS :

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>

Internet Explorer의 경우 의사 클래스focus (.ClassName : focus) 및 을 추가해야합니다 outline-style: none.

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */
}

이 행을 CSS에 삽입하고 클래스 속성에서 "disHighlight"를 호출하십시오.

.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}

빠른 해킹 업데이트

none모든 CSS user-select속성 (브라우저 접두사 포함)에 값 을 사용하면 여전히이 문제가 발생할 수 있습니다.

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}

으로 CSS-트릭 말한다는 문제가 있습니다 :

WebKit 은 주위의 요소를 선택하면 여전히 텍스트를 복사 할 수 있습니다.

아래 enforce요소를 사용하여 전체 요소가 선택 되도록 할 수도 있습니다. 즉, 요소를 클릭하면 해당 요소에 싸인 모든 텍스트가 선택됩니다. 이를 위해 값 none을 로 변경하기 만하면 됩니다 all.

.force-select {
    -webkit-user-select: all;  /* Chrome 49+     */
    -moz-user-select: all;     /* Firefox 43+    */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future  */
}

터치 이벤트로 Android 브라우저에서 동일한 결과를 얻는 데 어려움이있는 경우 다음을 사용하십시오.

html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

Less 와 Bootstrap 을 사용한다면 다음 과 같이 쓸 수 있습니다 :

.user-select(none);

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

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

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

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

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

-webkit-user-select: none;
-moz-user-select: none;

onselectstart="return false;"

::selection { 
    background: transparent; 
}

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

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

<div class="draggable"></div>

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

.draggable input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
 }

if ($.browser.msie)
    $('.draggable').find(':not(input)').attr('unselectable', 'on');

일

CSS :

-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;

이것은 작동하지만 이전 브라우저에서는 작동하지 않습니다. 브라우저 호환성 문제가 있습니다.

와 SASS (SCSS 구문)

mixin 으로이 작업을 수행 할 수 있습니다 .

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

HTML 태그에서 :

<div class="no-selectable">TRY TO HIGHLIGHT</div>

이 CodePen 에서 사용해보십시오 .

당신이 사용하는 경우 autoprefixer를 다른 접두사를 제거 할 수 있습니다.

브라우저 호환성 여기 .

Mozilla 전용 속성 외에는 아니요, 현재로서는 표준 CSS만으로 텍스트 선택을 비활성화 할 수있는 방법이 없습니다.

알다시피, 스택 오버플로는 탐색 버튼의 텍스트 선택을 비활성화하지 않으며 대부분의 경우 정상적인 선택 동작을 수정하고 사용자의 기대와 충돌하기 때문에 그렇게하지 않는 것이 좋습니다.

이것은 일부 브라우저 에서 작동 합니다.

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

선택기 앞에 원하는 요소 / ID를 공백없이 쉼표로 구분하여 추가하면됩니다.

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

다른 답변이 더 좋습니다. 이것은 아마도 최후의 수단 / 캐치로 보일 것입니다.

다음 div과 같은 두 가지가 있다고 가정 하십시오.

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}

<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

커서를 기본값으로 설정하면 사용자에게 선택 불가능한 느낌을 줄 수 있습니다.

모든 브라우저에서 접두사를 지원하려면 접두사를 사용해야합니다. 접두사가 없으면 모든 답변에서 작동하지 않을 수 있습니다.

색상 선택이 필요하지 않은 경우에 유용합니다.

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

... 다른 모든 브라우저 수정 사항. Internet Explorer 9 이상 에서 작동 합니다.

텍스트 선택을 비활성화하려는 첫 번째 div에 이것을 추가하십시오.

onmousedown='return false;' 
onselectstart='return false;'

노트:

정답은 텍스트를 선택할 수 없다는 점에서 정확합니다. 그러나 다음 두 스크린 샷 (2014 년 11 월 7 일 현재)과 함께 표시되므로 텍스트를 복사 할 수는 없습니다.

보시다시피 숫자를 선택할 수 없었지만 복사 할 수있었습니다.

테스트 : Ubuntu , Google Chrome 38.0.2125.111.

내가 필요한 결과를 얻으려면, 내가 모두를 사용했다 발견 ::selection하고user-select

input.no-select:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.no-select::selection {
    background: transparent;
}

input.no-select::-moz-selection {
    background: transparent;
}

다음과 같이 쉽게 수행 할 수 있습니다.

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

또는

당신이 있다고 가정 해 봅시다 <h1 id="example">Hello, World!</h1>. 그것의 innerHTML ( h1이 경우 Hello, World) 을 제거해야합니다 . 그런 다음 CSS로 이동하여 다음을 수행해야합니다.

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}

이제는 단순히 텍스트가 아니라 블록 요소라고 생각합니다.

이것은 CSS가 아니지만 언급 할 가치가 있습니다.

jQuery UI 비활성화 선택 :

$("your.selector").disableSelection();

JavaScript없이 내 솔루션을 확인하십시오.

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}

<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

내 기술이 적용된 팝업 메뉴 : http://jsfiddle.net/y4Lac/2/

이 의사 요소는 CSS 선택기 레벨 3의 초안에 있었지만 후보 권장 사항 단계에서 제거되었습니다. 특히 중첩 요소와 관련하여 동작이 잘못 지정되어 상호 운용성이 달성되지 않은 것으로 나타났습니다.

:: selection이 중첩 요소에서 작동하는 방식에서 논의됩니다 .

브라우저에서 구현되어 있지만 탭 디자인 (선택한 경우)과 동일한 색상 및 배경색을 사용하여 텍스트가 선택되지 않은 것처럼 보일 수 있습니다.

일반적인 CSS 디자인

p { color: white;  background: black; }

선택시

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

사용자가 텍스트를 선택하지 못하게하면 사용성 문제가 발생합니다.