Cách tắt tính năng tô sáng lựa chọn văn bản

Đối với các neo hoạt động như các nút (ví dụ: Câu hỏi , Thẻ , Người dùng , v.v. ở đầu trang Stack Overflow) hoặc các tab, có cách nào để chuẩn hóa hiệu ứng tô sáng nếu người dùng vô tình chọn văn bản không?

Tôi nhận ra điều này có thể được thực hiện với JavaScript và một chút googling mang lại -moz-user-selecttùy chọn chỉ có Mozilla .

Có cách nào tuân thủ tiêu chuẩn để thực hiện điều này với CSS không, và nếu không, cách tiếp cận "thực hành tốt nhất" là gì?

CẬP NHẬT tháng 1 năm 2017:

Theo Tôi có thể sử dụng , user-selecthiện tại được hỗ trợ trong tất cả các trình duyệt ngoại trừ Internet Explorer 9 và các phiên bản trước đó (nhưng đáng buồn là vẫn cần tiền tố của nhà cung cấp).

Tất cả các biến thể CSS chính xác là:

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

Lưu ý rằng user-selectđang trong quá trình tiêu chuẩn hóa (hiện đang trong dự thảo làm việc của W3C ). Nó không được đảm bảo để hoạt động ở mọi nơi và có thể có sự khác biệt trong việc triển khai giữa các trình duyệt và trong các trình duyệt trong tương lai có thể bỏ hỗ trợ cho nó.

Thông tin thêm có thể được tìm thấy trong tài liệu Mạng của Nhà phát triển Mozilla .

Trong hầu hết các trình duyệt, điều này có thể đạt được bằng cách sử dụng các biến thể độc quyền trên thuộc tính CSS user-select, ban đầu được đề xuất và sau đó bị bỏ rơi trong CSS 3 và hiện được đề xuất trong CSS UI Cấp 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;
}

Đối với Internet Explorer <10 và Opera <15, bạn sẽ cần sử dụng unselectablethuộc tính của thành phần bạn muốn không thể chọn. Bạn có thể thiết lập điều này bằng cách sử dụng một thuộc tính trong HTML:

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

Đáng buồn là thuộc tính này không được kế thừa, có nghĩa là bạn phải đặt một thuộc tính vào thẻ bắt đầu của mọi thành phần bên trong <div>. Nếu đây là một vấn đề, thay vào đó, bạn có thể sử dụng JavaScript để thực hiện điều này một cách đệ quy cho hậu duệ của một thành phần:

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

Cập nhật ngày 30 tháng 4 năm 2014 : Chuyển đổi cây này cần được chạy lại bất cứ khi nào một phần tử mới được thêm vào cây, nhưng dường như từ một nhận xét của @Han rằng có thể tránh điều này bằng cách thêm một mousedowntrình xử lý sự kiện đặt unselectablevào mục tiêu của biến cố. Xem http://jsbin.com/yagekiji/1 để biết chi tiết.

Điều này vẫn không bao gồm tất cả các khả năng. Mặc dù không thể bắt đầu các lựa chọn trong các phần tử không thể chọn, nhưng trong một số trình duyệt (ví dụ Internet Explorer và Firefox), vẫn không thể ngăn các lựa chọn bắt đầu trước và kết thúc sau phần tử không thể chọn mà không làm cho toàn bộ tài liệu không thể chọn.

Một giải pháp JavaScript cho Internet Explorer là:

onselectstart="return false;"

Cho đến khi thuộc tính do người dùng chọn của CSS 3 khả dụng, các trình duyệt dựa trên Gecko hỗ trợ thuộc -moz-user-selecttính bạn đã tìm thấy. Các trình duyệt dựa trên WebKit và Blink hỗ trợ thuộc -webkit-user-selecttính.

Điều này tất nhiên không được hỗ trợ trong các trình duyệt không sử dụng công cụ kết xuất Gecko.

Không có "tiêu chuẩn" nào tuân thủ nhanh chóng và dễ dàng để làm điều đó; sử dụng JavaScript là một tùy chọn.

Câu hỏi thực sự là, tại sao bạn muốn người dùng không thể làm nổi bật và có lẽ sao chép và dán các yếu tố nhất định? Tôi đã không bắt gặp một lần mà tôi muốn không cho phép người dùng làm nổi bật một phần nhất định của trang web của tôi. Một số bạn bè của tôi, sau khi dành nhiều giờ để đọc và viết mã sẽ sử dụng tính năng nổi bật như một cách để nhớ vị trí của họ trên trang hoặc cung cấp một điểm đánh dấu để mắt họ biết nơi cần nhìn tiếp theo.

Nơi duy nhất tôi có thể thấy điều này hữu ích là nếu bạn có các nút cho các biểu mẫu không nên sao chép và dán nếu người dùng sao chép và dán trang web.

Nếu bạn muốn tắt lựa chọn văn bản trên mọi thứ trừ <p>các yếu tố, bạn có thể thực hiện việc này bằng CSS (xem ra cho -moz-nonephép ghi đè trong các thành phần phụ, được phép trong các trình duyệt khác với 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;
}

Trong các giải pháp trong lựa chọn câu trả lời trước đó bị dừng, nhưng người dùng vẫn nghĩ rằng bạn có thể chọn văn bản vì con trỏ vẫn thay đổi. Để giữ cho nó tĩnh, bạn sẽ phải đặt con trỏ CSS của mình:

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

Điều này sẽ làm cho văn bản của bạn hoàn toàn phẳng, giống như nó sẽ có trong một ứng dụng máy tính để bàn.

Bạn có thể làm như vậy trong Firefox và Safari (Chrome cũng vậy?)

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

Giải pháp cho WebKit :

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

Tôi tìm thấy nó trong một ví dụ CardFlip.

Tôi thích giải pháp lai CSS + jQuery.

Để làm cho tất cả các thành phần bên trong <div class="draggable"></div>không thể chọn, sử dụng CSS này:

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

Và sau đó, nếu bạn đang sử dụng jQuery, hãy thêm phần này vào trong một $(document).ready()khối:

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

Tôi cho rằng bạn vẫn muốn bất kỳ yếu tố đầu vào nào có thể tương tác, do đó, :not()bộ chọn giả. Bạn có thể sử dụng '*'thay thế nếu bạn không quan tâm.

Hãy cẩn thận: Internet Explorer 9 có thể không cần phần jQuery bổ sung này, vì vậy bạn có thể muốn thêm một phiên bản kiểm tra trong đó.

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

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

Đó không phải là cách tốt nhất, mặc dù.

Bạn có thể sử dụng CSS hoặc JavaScript cho điều đó.

Cách JavaScript được hỗ trợ trong các trình duyệt cũ hơn , như các phiên bản Internet Explorer cũ , nhưng nếu đó không phải là trường hợp của bạn, hãy sử dụng cách CSS sau đó:

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>

Ngoài ra, đối với Internet Explorer, bạn cần thêm lớp giảfocus (.ClassName: tập trung) và 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  */
}

Cố gắng chèn các hàng này vào CSS và gọi "disHighlight" tại thuộc tính lớp:

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

Cập nhật Hack nhanh

Nếu bạn sử dụng giá trị nonecho tất cả các user-selectthuộc tính CSS (bao gồm tiền tố trình duyệt của nó), có một vấn đề vẫn có thể xảy ra bởi điều này.

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

Như CSS-Tricks nói, vấn đề là:

WebKit vẫn cho phép văn bản được sao chép, nếu bạn chọn các yếu tố xung quanh nó.

Bạn cũng có thể sử dụng cái bên dưới để enforcetoàn bộ phần tử được chọn, nghĩa là nếu bạn nhấp vào một phần tử, tất cả văn bản được bọc trong phần tử đó sẽ được chọn. Đối với điều này tất cả bạn phải làm là thay đổi giá trị nonethành 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  */
}

Đối với những người gặp khó khăn trong việc đạt được điều tương tự trong trình duyệt Android với sự kiện chạm, hãy sử dụng:

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

Nếu bạn đang sử dụng Ít và Bootstrap, bạn có thể viết:

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

Đang làm việc

CSS:

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

Điều này sẽ hoạt động, nhưng nó sẽ không hoạt động cho các trình duyệt cũ. Có một vấn đề tương thích trình duyệt.

Với SASS (cú pháp SCSS)

Bạn có thể làm điều này với một 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;
}

Trong thẻ HTML:

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

Hãy thử nó trong CodePen này .

Nếu bạn đang sử dụng trình tự động trộn, bạn có thể xóa các tiền tố khác.

Tương thích trình duyệt ở đây .

Ngoài thuộc tính chỉ có Mozilla, không, không có cách nào để vô hiệu hóa lựa chọn văn bản chỉ bằng CSS tiêu chuẩn (tính đến thời điểm hiện tại).

Nếu bạn để ý, Stack Overflow không vô hiệu hóa lựa chọn văn bản cho các nút điều hướng của họ và tôi khuyên bạn không nên làm như vậy trong hầu hết các trường hợp, vì nó sửa đổi hành vi lựa chọn bình thường và khiến nó xung đột với mong đợi của người dùng.

Điều này hoạt động trong một số trình duyệt:

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

Chỉ cần thêm các thành phần / id mong muốn của bạn vào trước các bộ chọn được phân tách bằng dấu phẩy không có dấu cách, như vậy:

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

Các câu trả lời khác là tốt hơn; điều này có lẽ nên được xem như là một phương sách cuối cùng

Giả sử có hai divs như thế này:

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

Đặt con trỏ về mặc định để nó mang lại cảm giác không thể chọn cho người dùng.

Tiền tố cần được sử dụng để hỗ trợ nó trong tất cả các trình duyệt. Không có tiền tố, điều này có thể không hoạt động trong tất cả các câu trả lời.

Điều này sẽ hữu ích nếu không cần chọn màu:

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

... tất cả các bản sửa lỗi trình duyệt khác. Nó sẽ hoạt động trong Internet Explorer 9 trở lên.

Thêm phần này vào div đầu tiên mà bạn muốn tắt lựa chọn cho văn bản:

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

GHI CHÚ:

Câu trả lời đúng là chính xác ở chỗ nó ngăn bạn không thể chọn văn bản. Tuy nhiên, điều đó không ngăn bạn có thể sao chép văn bản, vì tôi sẽ hiển thị với một vài ảnh chụp màn hình tiếp theo (kể từ ngày 7 tháng 11 năm 2014).

Như bạn có thể thấy, chúng tôi không thể chọn các số, nhưng chúng tôi có thể sao chép chúng.

Đã thử nghiệm trên: Ubuntu , Google Chrome 38.0.2125.111.

Để có được kết quả tôi cần, tôi thấy tôi phải sử dụng cả hai ::selectionvà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;
}

Nó dễ dàng được thực hiện với:

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

Cách khác:

Hãy nói rằng bạn có một <h1 id="example">Hello, World!</h1>. Bạn sẽ phải loại bỏ cácHTML bên trong đó h1, trong trường hợp này là Hello, World . Sau đó, bạn sẽ phải đi đến CSS và làm điều này:

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

Bây giờ nó chỉ đơn giản nghĩ rằng nó là một yếu tố khối, và không phải văn bản.

Đây không phải là CSS, nhưng nó đáng được đề cập:

Lựa chọn vô hiệu hóa giao diện người dùng jQuery :

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

Kiểm tra giải pháp của tôi mà không cần 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>

Menu popup với kỹ thuật của tôi được áp dụng: http://jsfiddle.net/y4Lac/2/

Mặc dù phần tử giả này nằm trong bản nháp của Bộ chọn CSS cấp 3, nhưng phần tử này đã bị xóa trong giai đoạn Khuyến nghị của Ứng viên, vì có vẻ như hành vi của nó đã được chỉ định rõ, đặc biệt là với các phần tử lồng nhau và khả năng tương tác đã đạt được.

Nó đang được thảo luận trong How :: select hoạt động trên các phần tử lồng nhau .

Mặc dù nó đang được triển khai trong các trình duyệt, bạn có thể tạo ảo giác về văn bản không được chọn bằng cách sử dụng cùng màu và màu nền khi chọn như thiết kế tab (trong trường hợp của bạn).

Thiết kế CSS bình thường

p { color: white;  background: black; }

Lựa chọn

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

Không cho phép người dùng chọn văn bản sẽ nêu ra các vấn đề về khả năng sử dụng.