如何使用 CSS 禁用文本选择

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

在网页上，我们通常不应该禁用文本选择功能，但在某些情况下，启用该功能可能会影响用户体验。一般来说，我们不希望剥夺用户选择文本的能力，因为这会导致糟糕的用户体验。曾经有一些网站会阻止用户复制文章文本以防止抄袭，但值得庆幸的是，这种情况如今已非常罕见。

尽管如此，也有不少例子表明，禁用文本选择功能实际上可以改善用户体验。例如：

• 在触发事件的 HTML 元素上，尤其是在移动设备上——点击或双击可能会导致文本选择。
• 在拖放界面中，用户必须拖动元素——我们不希望拖动操作也触发文本选择。
• 在许多其他定制的 Web 用户应用程序中，文本选择需要限制在特定元素或情况下。例如，在文本编辑器中，我们通常不希望粗体按钮可选中，因为它只是一个按钮。

幸运的是，CSS 提供了一种简单的方法来禁用某些元素的文本选择功能（如果需要的话）。

如何在 CSS 中禁用文本选择

除了部分版本的 Safari 浏览器外，所有现代浏览器都支持 ` user-select<select>` 属性，该属性可以使任何 HTML 元素不被选中。例如，如果您希望所有按钮都不被选中，您可以编写以下代码：

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

由于 Safari 仍然需要它，所以我们必须使用-webkit-user-select它。如果您想支持 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 上找到对 user-select 的完整、最新的支持列表。

想看一些演示，请点击此处查看原文。