CSS 텍스트 선택 비활성화

92

현재 텍스트 선택을 비활성화하기 위해 본문 태그에 넣었습니다.

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

그러나 이제 내 input및 textarea상자를 선택할 수 없습니다. 이러한 입력 요소 만 선택 가능하고 나머지는 선택 불가능하게 만들 수있는 방법은 무엇입니까?

css

— Neil
소스

나는 선택할 수 input있고 textarea요소 : jsfiddle.net/Smy26

— Sampson

웹킷이 해당 요소에 대한 선택을 허용하는 것처럼 보이지만 moz는 그렇지 않습니다.

— Christian

5

텍스트 선택 강조 표시를 비활성화

— Mottie

171

이러한 속성을 전신에 적용하지 마십시오. 클래스로 이동하고 해당 클래스를 비활성화하려는 요소에 적용하십시오.

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

— Someth Victory
소스

3

Chrome, Safari에서는 지원되지 않습니다 .

— knutole

5

@knutole 테이블을 다시 읽으십시오. 의 값 은 elementChrome / Safari에서 지원되지 않습니다.

— MForMarlon 2014 년

31

모든 요소에서 사용자 선택을 비활성화 할 수도 있습니다.

* {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

그리고 사용자가 선택할 수 있도록하려는 요소에서 활성화하는 것보다 :

input, textarea /*.contenteditable?*/ {
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

— Rik
소스

1

완전한 브라우저 지원을 위해 다음 속성을 <body> 또는 <div> 요소에 추가해야합니다. unselectable = "yes"onselectstart = "return false"onmousedown = "return false"/ *주의해서 사용하십시오. 마지막 속성은 기존 기능에 영향을 미칠 수 있습니다. * /

— Dan

11

모든 것을 요약하고 싶었습니다.

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

<div class="unselectable" unselectable="yes" onselectstart="return false;"/>

— 메글 리오
소스

1

이전 버전의 Firefox에서는 HTML에 하나 이상의 속성을 추가해야 할 수 있습니다. onmousedown = "return false"

— Dan

2

::selection,::moz-selection {color:currentColor;background:transparent}

— BT
소스

여기에 명시된대로 w3schools.com/cssref/sel_selection.asp . 이것은 지금까지 CSS 사양의 일부가 아니며 Firefox에는 -moz-가 필요합니다. 그래서 올바른은 다음과 같아야합니다 : - MOZ 선택 {색상 : CurrentColor에; 배경 : 투명} :: 선택 {색상 : CurrentColor에, 배경 : 투명}

— 블라디슬라프

1

@Vladislav moz 접두사에 대한 좋은 지적입니다. 솔직히, w3schools를 신뢰하지 마십시오. 그런 끔찍한 소스입니다. MDN은 실제 브라우저 호환성 버전을 제공하고 :: selection이 CSS 초안에서 제거되었지만 다시 추가되었습니다 : developer.mozilla.org/en-US/docs/Web/CSS/::selection . 또 다른 참고 사항, firefox는 접두사를 제거 할 준비가되었습니다 : bugzilla.mozilla.org/show_bug.cgi?id=509958

— BT

2

모든 선택을 비활성화 할 수 있습니다.

.disable-all{-webkit-touch-callout: none;  -webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

이제 입력 및 텍스트 영역 활성화를 활성화 할 수 있습니다.

input, textarea{
-webkit-touch-callout:default;
-webkit-user-select:text;
-khtml-user-select: text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;}

— 샤나와 즈
소스

1

*이를 위해 와일드 카드 선택기 를 사용하십시오 .

#div * { /* Narrowing, to specific elements, like  input, textarea is PREFFERED */
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

이제 id div가 있는 div 내의 모든 요소 에는 선택 항목이 없습니다.

데모

— Starx
소스

0

body원하는 요소 목록 을 입력하는 대신 .

— 에릭 포티스
소스

0

Someth Victory에 동의합니다. 선택하지 않으려는 일부 요소에 특정 클래스를 추가해야합니다.

또한 자바 스크립트를 사용하여 특정 경우에이 클래스를 추가 할 수 있습니다. CSS를 사용하여 콘텐츠를 선택할 수 없게 만드는 예제 입니다.

— Starikovs
소스

0

모든 곳에서 선택 비활성화

input, textarea ,*[contenteditable=true] {
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
   }

IE7

 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

— Cristianojeda
소스