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

Question

对于作用类似于按钮的 anchor (例如，这个 Stack Overflow 页面侧边栏上标题为问题、标签和用户) 或选项卡，如果用户不小心选择了文本，是否有 CSS 标准方法来禁用突出显示效果？

我意识到这可以用 JavaScript 来完成，稍微谷歌一下就找到了 Mozilla-only -moz-user-select 选项。

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

Answer 1

2017 年 1 月更新:

根据 Can I use , user-select + -webkit-user-select for Safari 足以在所有主流浏览器中实现所需的行为。

---

这些是所有可用的正确 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。