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

Question

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

我意识到这可以通过 JavaScript 完成，并且通过谷歌搜索得到了 Mozilla 独有的 -moz-user-select 选项。

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

Answer 1

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

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

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

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

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

Answer 2

除了 Mozilla-only 属性，不，没有办法仅使用标准 CSS 禁用文本选择（截至目前）。

如果您注意到，Stack Overflow 不会为其导航按钮禁用文本选择，我建议在大多数情况下不要这样做，因为它会修改正常的选择行为并使其与用户的期望相冲突。

Answer 3

您可以在 Firefox 和 Safari（Chrome 也可以？）中这样做

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

Answer 4

Internet Explorer 的 JavaScript 解决方案是：

onselectstart="return false;"

Answer 5

在大多数浏览器中，这可以使用 CSS user-select 属性的专有变体来实现，originally proposed and then abandoned in 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;
}

对于 Internet Explorer Opera unselectable 属性。您可以使用 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）中，仍然无法阻止在不可选择元素之前和之后开始和结束的选择，而不会使整个文档不可选择。

Answer 6

2017 年 1 月更新：

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

---

这些是所有可用的正确 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 working draft 中）。它不能保证在任何地方都可以工作，并且浏览器之间的实现可能存在差异。此外，浏览器将来可能会放弃对它的支持。

---

更多信息可以在Mozilla Developer Network documentation找到。

这个属性的值是none、text、toggle、element、elements、all和inherit。

Answer 7

如果您想禁用除 <p> 元素之外的所有内容的文本选择，您可以在 CSS 中执行此操作（注意 -moz-none，它允许在子元素中覆盖，这在其他浏览器中允许使用 @987654323 @):

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