CSS vô hiệu hóa lựa chọn văn bản

92

Hiện tại, tôi đã đặt cái này trong thẻ body để tắt các lựa chọn văn bản:

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

Tuy nhiên, hộp của tôi inputvà textareabây giờ không thể chọn được. Làm cách nào để tôi chỉ có thể chọn các phần tử đầu vào này và phần còn lại không thể chọn được?

css

— Neil
nguồn

Tôi có thể chọn inputvà textareacác phần tử: jsfiddle.net/Smy26

— Sampson,

Có vẻ như webkit cho phép lựa chọn các yếu tố đó, nhưng moz thì không.

— Christian

5

có thể trùng lặp quy tắc CSS để vô hiệu hóa đánh dấu vùng chọn văn bản

— Mottie

171

Không áp dụng các đặc tính này cho toàn bộ cơ thể. Di chuyển chúng vào một lớp và áp dụng lớp đó cho các phần tử bạn muốn vô hiệu hóa select:

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

— Chiến thắng nào đó
nguồn

3

Không được hỗ trợ trong Chrome, Safari.

— knutole

5

@knutole Đọc lại bảng. Các giá trị của elementkhông được hỗ trợ trong Chrome / Safari.

— MForMarlon

31

Bạn cũng có thể tắt lựa chọn của người dùng trên tất cả các phần tử:

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

Và hơn là kích hoạt nó trên các phần tử bạn muốn người dùng có thể chọn:

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

— Rik
nguồn

1

Để được hỗ trợ đầy đủ cho trình duyệt, bạn nên thêm các thuộc tính sau vào phần tử <body> hoặc <div> của mình: unselectable = "yes" onselectstart = "return false" onmousedown = "return false" / * sử dụng cẩn thận, thuộc tính cuối cùng có thể ẢNH HƯỞNG ĐẾN TÍNH NĂNG TỒN TẠI * /

— Dan

11

Chỉ muốn tóm tắt mọi thứ:

.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;"/>

— Meglio
nguồn

1

Phiên bản cũ của trình duyệt Firefox có thể yêu cầu thêm một thuộc tính hơn với HTML: onmousedown = "return false"

— Dan

2

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

— BT
nguồn

Như đã nêu ở đây w3schools.com/cssref/sel_selection.asp . Đây không phải là một phần của bất kỳ đặc tả CSS nào cho đến nay và Firefox yêu cầu -moz-. Vì vậy, câu trả lời đúng phải là: :: - moz-selection {color: currentColor; background: transparent} :: selection {color: currentColor; background: transparent}

— Vladislav

1

@Vladislav Điểm tốt về tiền tố moz. Thành thật mà nói, không tin tưởng w3schools. Đó là một nguồn khủng khiếp. MDN cung cấp các phiên bản tương thích thực tế của trình duyệt và lưu ý rằng :: lựa chọn đã bị xóa khỏi bản nháp CSS, NHƯNG đã được thêm lại: developer.mozilla.org/en-US/docs/Web/CSS/::selection . Một lưu ý khác, firefox đã sẵn sàng loại bỏ sự cần thiết của tiền tố: bugzilla.mozilla.org/show_bug.cgi?id=509958

— BT

2

bạn có thể tắt tất cả lựa chọn

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

bây giờ bạn có thể bật đầu vào và bật vùng văn bản

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

— Shahnawaz
nguồn

1

Sử dụng bộ chọn thẻ đại diện *cho mục đích này.

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

Bây giờ, mọi phần tử bên trong một div có id divsẽ không có lựa chọn.

Bản giới thiệu

— Starx
nguồn

0

thay vì bodynhập danh sách các phần tử bạn muốn.

— Eric Fortis
nguồn

0

Tôi đồng ý với Someth Victory, bạn cần thêm một lớp cụ thể vào một số phần tử mà bạn muốn không thể chọn được.

Ngoài ra, bạn có thể thêm lớp này trong các trường hợp cụ thể bằng cách sử dụng javascript. Ví dụ ở đây Làm cho nội dung không được chọn với sự trợ giúp của CSS .

— starikovs
nguồn

0

Tắt lựa chọn ở mọi nơi

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
nguồn