CSS 如何禁用文本选择突出显示

How to disable text selection highlighting

提问by Blowsie

For anchors that act like buttons (for example, Questions, Tags, Users, etc. at the top of the Stack Overflow page) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text?

对于类似于按钮（例如Stack Overflow 页面顶部的Questions、Tags、Users等）或选项卡的锚点，如果用户不小心选择了文本，是否有禁用突出显示效果的 CSS 标准方法？

I realize this could be done with JavaScript, and a little googling yielded the Mozilla-only -moz-user-selectoption.

我意识到这可以用 JavaScript 来完成，稍微谷歌搜索产生了 Mozilla-only-moz-user-select选项。

Is there a standard-compliant way to accomplish this with CSS, and if not, what is the "best practice" approach?

是否有符合标准的方法来使用 CSS 来实现这一点，如果没有，“最佳实践”方法是什么？

回答by Blowsie

UPDATE January, 2017:

2017 年 1 月更新：

According to Can I use, the user-selectis currently supported in all browsers except Internet Explorer 9 and earlier versions (but sadly stillneeds a vendor prefix).

根据Can I use，user-select目前除 Internet Explorer 9 和更早版本外的所有浏览器都支持（但遗憾的是仍然需要供应商前缀）。

---

---

All of the correct CSS variations are:

所有正确的 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>

---

---

Note that user-selectis in standardization process (currently in a W3C working draft). It is not guaranteed to work everywhere, and there might be differences in implementation among browsers and in the future browsers can drop support for it.

请注意，这user-select是在标准化过程中（目前在W3C 工作草案中）。它不能保证在任何地方都有效，并且浏览器之间的实现可能存在差异，未来浏览器可能会放弃对它的支持。

---

---

More information can be found in Mozilla Developer Network documentation.

更多信息可以在Mozilla Developer Network 文档中找到。

回答by Tim Down

In most browsers, this can be achieved using proprietary variations on the CSS user-selectproperty, originally proposed and then abandoned in CSS 3and now proposed in CSS UI Level 4:

在大多数浏览器中，这可以使用 CSSuser-select属性的专有变体来实现，最初在 CSS 3 中提出，然后在 CSS 3 中放弃，现在在CSS UI Level 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;
}

For Internet Explorer < 10 and Opera< 15, you will need to use the unselectableattribute of the element you wish to be unselectable. You can set this using an attribute in HTML:

对于 Internet Explorer < 10 和Opera< 15，您需要使用unselectable您希望不可选的元素的属性。您可以使用 HTML 中的属性进行设置：

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

Sadly this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the <div>. If this is a problem, you could instead use JavaScript to do this recursively for an element's descendants:

遗憾的是，此属性不是继承的，这意味着您必须在<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"));

---

---

Update 30 April 2014: This tree traversal needs to be rerun whenever a new element is added to the tree, but it seems from a comment by @Han that it is possible to avoid this by adding a mousedownevent handler that sets unselectableon the target of the event. See http://jsbin.com/yagekiji/1for details.

2014 年 4 月 30 日更新：每当向树添加新元素时都需要重新运行此树遍历，但从@Han 的评论看来，可以通过添加mousedown设置unselectable在目标上的事件处理程序来避免这种情况事件。有关详细信息，请参阅http://jsbin.com/yagekiji/1。

---

---

This still doesn't cover all possibilities. While it is impossible to initiate selections in unselectable elements, in some browsers (Internet Explorer and Firefox, for example) it's still impossible to prevent selections that start before and end after the unselectable element without making the whole document unselectable.

这仍然没有涵盖所有可能性。虽然不可能在不可选择的元素中启动选择，但在某些浏览器（例如 Internet Explorer 和 Firefox）中，仍然无法阻止在不可选择元素之前和之后开始的选择而不使整个文档不可选择。

回答by Pekka

A JavaScript solution for Internet Explorer is:

Internet Explorer 的 JavaScript 解决方案是：

onselectstart="return false;"

回答by X-Istence

Until CSS 3's user-selectproperty becomes available, Gecko-based browsers support the -moz-user-selectproperty you already found. WebKitand Blink-based browsers support the -webkit-user-selectproperty.

在 CSS 3 的用户选择属性可用之前，基于Gecko的浏览器支持-moz-user-select您已经找到的属性。WebKit和基于 Blink 的浏览器支持该-webkit-user-select属性。

This of course is not supported in browsers that do not use the Gecko rendering engine.

这当然在不使用 Gecko 渲染引擎的浏览器中不受支持。

There is no "standards" compliant quick-and-easy way to do it; using JavaScript is an option.

没有符合“标准”的快速简便的方法来做到这一点；使用 JavaScript 是一种选择。

The real question is, why do you want users to not be able to highlight and presumably copy and paste certain elements? I have not come across a single time that I wanted to not let users highlight a certain portion of my website. Several of my friends, after spending many hours reading and writing code will use the highlight feature as a way to remember where on the page they were, or providing a marker so that their eyes know where to look next.

真正的问题是，为什么您希望用户不能突出显示并可能复制和粘贴某些元素？我从来没有遇到过不想让用户突出显示我网站的某个部分的情况。我的几个朋友在花了很多时间阅读和编写代码后，会使用突出显示功能来记住他们在页面上的位置，或者提供一个标记，以便他们的眼睛知道下一步该看哪里。

The only place I could see this being useful is if you have buttons for forms that should not be copy and pasted if a user copy and pasted the website.

我认为这很有用的唯一地方是，如果用户复制并粘贴了网站，则您的表单按钮不应被复制和粘贴。

回答by Benjamin Crouzier

If you want to disable text selection on everything except on <p>elements, you can do this in CSS (watch out for the -moz-nonewhich allows override in sub-elements, which is allowed in other browsers with none):

如果您想禁用除<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;
}

回答by ZECTBynmo

In the solutions in previous answers selection is stopped, but the user still thinks you can select text because the cursor still changes. To keep it static, you'll have to set your CSS cursor:

在先前答案中的解决方案中，选择已停止，但用户仍然认为您可以选择文本，因为光标仍在变化。为了保持静态，你必须设置你的 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>

This will make your text totally flat, like it would be in a desktop application.

这将使您的文本完全平坦，就像在桌面应用程序中一样。

回答by seanmonstar

You can do so in Firefox and Safari (Chrome also?)

您可以在 Firefox 和 Safari（Chrome 也可以？）

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

回答by Alex

Workaround for WebKit:

WebKit 的解决方法：

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

I found it in a CardFlip example.

我在 CardFlip 示例中找到了它。

回答by Tom Auger

I like the hybrid CSS + jQuery solution.

我喜欢混合 CSS + jQuery 解决方案。

To make all elements inside <div class="draggable"></div>unselectable, use this CSS:

要使里面的所有元素都无法<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;
 }

And then, if you're using jQuery, add this inside a $(document).ready()block:

然后，如果您使用 jQuery，请将其添加到一个$(document).ready()块中：

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

I figure you still want any input elements to be interactable, hence the :not()pseudo-selector. You could use '*'instead if you don't care.

我认为您仍然希望任何输入元素都是可交互的，因此是:not()伪选择器。'*'如果你不在乎，你可以改用。

Caveat: Internet Explorer 9 may not need this extra jQuery piece, so you may want to add a version check in there.

警告：Internet Explorer 9 可能不需要这个额外的 jQuery 部分，因此您可能需要在其中添加版本检查。

回答by Ale

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

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

It's not the best way, though.

不过，这不是最好的方法。