如何在 CSS 中禁用文本选择

在网页上,我们通常不应该禁用文本选择,但在某些情况下启用它会影响用户体验。通常,我们不想剥夺用户选择文本的能力,因为这会导致糟糕的用户体验。曾经有一段时间,少数网站会阻止用户复制文章文本作为阻止抄袭的一种方法,但幸运的是,这种情况在今天已经不常见了。

话虽如此,有很多例子表明禁用文本选择实际上可以改善用户体验。例如:

  • 在触发事件的 HTML 元素上,尤其是在移动设备上 – 点击或双击可能会导致文本选择
  • 在拖放界面上,用户必须拖动元素 – 我们不希望该拖动也触发文本选择。
  • 在许多其他自定义 Web 构建的用户应用程序中,文本选择需要仅限于某些元素或情况。例如,在文本编辑器上,我们通常不希望使文本变为粗体的按钮是可选的,因为它是一个按钮。

如果您决定禁用文本选择,幸运的是,有一种简单的方法可以在 CSS 中完成此操作。

如何在 CSS 中禁用文本选择#

所有现代浏览器(某些版本的 Safari 除外)都支持该user-select属性,这使得任何 HTML 元素都无法选择。例如,如果您希望所有按钮都不可选,您可以编写以下内容:

button {
    -webkit-user-select: none;
    user-select: none;
}

我们必须使用-webkit-user-select,因为 Safari 仍然需要它。如果您想支持 Internet Explorer(越来越少见),您还可以使用-ms-user-select

button {
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

这个单一属性将停止用户选择。user-select理论上,它还具有其他属性,但对这些属性的支持各不相同。

  • user-select: none– 没有用户选择元素。
  • user-select: text– 您只能选择元素内的文本
  • user-select: all– 点击一次将选择整个元素内容。
  • user-select: auto– 默认情况下,您可以像往常一样选择所有内容。

您可以在 caniuse 上找到支持用户选择的完整最新列表。

为了向您展示每种方法的工作原理,以下是一些示例。请注意,两者textall支持有限的 Safari,因此请考虑在 Chrome 中尝试这些。

用户选择设置为无

这相当于user-select: none.

您将无法选择此文本!

用户选择设置为全部

这相当于user-select: all.

点击一次将导致您选择所有文本。

用户选择设置为文本

这个例子与user-select: auto.

您将只能选择此元素中的文本。