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

小编典典

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

css

对于充当按钮的anchors （例如，“堆栈溢出”页面顶部的“ 问题”，“ 标签”，“ 用户 ”等）或选项卡，是否存在CSS标准方法来禁用突出显示效果（如果用户不小心选择了文本）？

我意识到可以使用JavaScript来完成此操作，并且经过一番搜寻后得出了仅Mozilla -moz-user-select选项。

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

阅读 625

2020-05-19

共1个答案

小编典典

根据“我可以使用”，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>

请注意，这是非标准功能（即不是任何规范的一部分）。不能保证它在任何地方都能工作，并且浏览器的实现可能会有所不同，将来浏览器可能会放弃对此的支持。

2020-05-19