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

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

버튼과 같은 기능을 하는 앵커(예를 들어 이 Stack Overflow 페이지의 사이드바에 있는 버튼) 또는 탭에서는 사용자가 실수로 텍스트를 선택했을 때 하이라이트 효과를 디세블로 하는 CSS 표준 방법이 있습니까?

할 수 , Mozilla만의 JavaScript가 되었습니다.-moz-user-select★★★★★★ 。

CSS를 사용하여 이를 실현하는 표준 준거 방법이 있습니까?그렇지 않은 경우 '베스트 프랙티스' 접근방식은 무엇입니까?

2017년 1월 갱신:

Can I use에 따르면user-select+ for Safari는 모든 주요 브라우저에서 원하는 동작을 수행하기에 충분합니다.

---

사용 가능한 올바른 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 설명서를 참조하십시오.

은 「Attribute(아트리뷰트는 「Attribute」입니다.none,text,toggle,element,elements,all ★★★★★★★★★★★★★★★★★」inherit.

하여 이를 할 수 .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 html html html html html html html html html html html html 。

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

도 이 상속되지 . 즉, 이 속성은 상속되지 않습니다. 즉, 이 속성 에 있는 모든 .<div>문제가 있는 경우 JavaScript를 사용하여 요소의 하위 항목에 대해 재귀적으로 수행할 수 있습니다.

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)에서는 전체 문서를 선택할 수 없도록 하지 않고 선택할 수 없는 요소 이전에 시작하거나 이후에 끝나는 선택을 방지할 수 없습니다.

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

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

이를 위한 "표준" 준수 빠르고 쉬운 방법은 없습니다. JavaScript를 사용하는 것도 옵션입니다.

진짜 질문은 사용자가 특정 요소를 강조 표시하고 복사하여 붙여넣을 수 없는 이유는 무엇입니까?사용자가 제 웹사이트의 특정 부분을 강조 표시하도록 하고 싶지 않은 적은 단 한 번도 없었습니다.코드를 읽고 쓰는 데 많은 시간을 소비한 후, 제 친구들 중 몇 명은 페이지의 어디에 있었는지 기억하는 방법이나 다음에 어디를 봐야 할지 눈이 알 수 있도록 마커를 제공하는 방법으로 하이라이트 기능을 사용할 것입니다.

사용자가 웹 사이트를 복사하여 붙여넣을 경우 복사 및 붙여넣지 않아야 하는 양식에 대한 버튼이 있는 경우만 유용하게 사용할 수 있습니다.

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

onselectstart="return false;"

를 한 모든 에 대해 <p>로 실행할 수(「」CSS 에 해 주세요).-moz-none는 서브브라우저에서 하며, 에서는 "Override"가 「Override」로 할 수 .이것은, 다른 브라우저에서도 허가되고 있습니다.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를 합니다.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를 사용하는 이 을 jQuery의 v-center Server에 합니다.$(document).ready() 삭제:

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

가 상호 작용이 로 유지되기를 원하는 것 . 입력 요소는 상호 이 가능합니다. 따라서:not() 하면 '어느끼다'를 쓸 수 있어요.'*'신신신면면면면면면면

주의: Internet Explorer 9는 이 추가 jQuery 조각이 필요하지 않을 수 있으므로 버전 체크를 추가할 수 있습니다.

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

JavaScript 방식은 Internet Explorer 이전 버전과 같은 오래된 브라우저에서도 지원되지만 그렇지 않은 경우 CSS 방식을 사용하십시오.

HTML/JavaScript:

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

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

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

하지만 그게 최선의 방법은 아니야.

Internet Explorer의 경우 의사 클래스(.ClassName: 포커스) 및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;
}

빠른 Hack 업데이트

을 none 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-Tricks가 말했듯이 문제는 다음과 같습니다.

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  */
}

SAS(SCSS 구문)를 사용하는 경우

믹스인을 사용하여 이 작업을 수행할 수 있습니다.

// 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. YOU CANNOT!</div>

---

이 CodePen으로 시도해 보세요.

자동 리픽서를 사용하고 있는 경우는, 다른 프리픽스를 삭제할 수 있습니다.

브라우저 호환성은 이쪽

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');

Mozilla만의 속성을 제외하고 표준 CSS만으로 텍스트 선택을 비활성화할 수 있는 방법은 없습니다.

Stack Overflow는 탐색 버튼의 텍스트 선택을 해제하지 않습니다.일반적인 선택 동작을 수정하여 사용자의 기대와 상충하기 때문에 대부분의 경우 사용하지 않는 것이 좋습니다.

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

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

다음과 같이 간단하게 할 수 있습니다.

-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>에 있는 것을 . »HTMLh1, 이 경우 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.
}

이제 텍스트가 아닌 블록 요소라고 생각할 뿐입니다.

필요한 결과를 얻으려면 두 가지 방법을 모두 사용해야 했습니다.

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

이것은 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/

첫 번째 방법: (전혀 말도 안 되는 소리)

.no-select::selection, .no-select *::selection {
  background-color: Transparent;
}

.no-select { /* Sometimes I add this too. */
  cursor: default;
}

<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

단편:

.no-select::selection, .no-select *::selection {
  background-color: Transparent;
}

.no-select {
  /* Sometimes I add this too. */
  cursor: default;
}

<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

두 번째 방법(난센스 없음)

.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

단편:

.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

먼저 문제를 해결하세요.그리고 코드를 작성합니다.

존 존슨

이 유사 요소는 CSS Selectors 레벨3의 드래프트에 포함되어 있었지만, 특히 네스트된 요소와의 동작이 불충분하고 상호 운용성이 달성되지 않은 것으로 보여 후보 추천 단계에서 삭제되었습니다.

이는 중첩된 요소에서 선택 기능이 작동하는 방법에 대해 설명합니다.

브라우저에서 구현되고 있지만 탭 디자인과 동일한 색상과 배경색을 사용하면 텍스트가 선택되지 않는 착각을 일으킬 수 있습니다.

표준 CSS 설계

p { color: white;  background: black; }

선택 시

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

사용자가 텍스트를 선택할 수 없도록 하면 사용상의 문제가 발생합니다.

언급URL : https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting