用户选择 | CSS-Tricks

CSS 中的 user-select 属性控制允许选择元素中的文本的方式。例如，它可以用来使文本不可选。

.row-of-icons {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}

这在您希望为用户提供更轻松/更干净的复制粘贴体验的情况下很有用（不会让他们意外地选择无用的东西，例如图标或图像）。然而，它有点bug。 Firefox 强制执行这样一个事实，即与该选择器匹配的任何文本都无法复制。 WebKit 仍然允许您选择周围的元素时复制文本。

您也可以用它来强制整个元素被选中

.force-select {  
  -webkit-user-select: all;  /* Chrome 49+ */
  -moz-user-select: all;     /* Firefox 43+ */
  -ms-user-select: all;      /* No support yet */
  user-select: all;          /* Likely future */   
}

以下是这些演示

查看 user-select 演示，由 Chris Coyier (@chriscoyier) 在 CodePen 上创建。

这个属性很长一段时间都没有规范，但现在在 CSS 基本用户界面模块级别 4 中有介绍。

默认值为 auto，这使得选择按预期正常发生。“正常”有点复杂。这里值得引用规范：

在 ::before 和 ::after 伪元素上，计算值是 none

如果元素是可编辑元素，则计算值是 contain

否则，如果此元素的父元素上 user-select 的计算值为 all，则计算值为 all

否则，如果此元素的父元素上 user-select 的计算值为 none，则计算值为 none

否则，计算值为 text

换句话说，它会智能地级联并重置为一个合理的 state。它看起来可能可以用此功能使伪元素可选，但还没有最终决定。

旧的/专有的

Firefox 支持 -moz-none，它与 none 相似，只是它表示子元素可以覆盖级联，并使用 -moz-user-select: text; 再次可选。从 Firefox 21 开始，none 的行为类似于 -moz-none。

Internet Explorer 也支持一个迄今为止专有的值，element，您可以在元素内部选择文本，但选择将在该元素的边界处停止。

浏览器支持

这专门针对 -*-user-select: none;

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持此功能。

台式机

Chrome	Firefox	IE	Edge	Safari
4*	2*	10*	12*	3.1*

移动/平板电脑

Android Chrome	Android Firefox	Android	iOS Safari
127	127	2.1*	3.2*

Gabo

# 2012 年 3 月 15 日

不幸的是，它似乎不适用于 Android 设备……有什么建议吗？

sachou

评论永久链接# 2013 年 5 月 21 日

嗨，您找到解决 Android 问题的办法了吗？

似乎与设备有关，因为我在三星 Galaxy Note 2 上尝试过，问题不存在，但在华硕和三星 Galaxy Tab Note 2 上却存在问题。

此致。
Otto Nascarella

评论永久链接# 2013 年 7 月 9 日

发现一个奇怪的行为：它会导致输入文本字段无法接收文本……
Pavel

评论永久链接# 2015 年 10 月 1 日

似乎“user-select:none”在 Android 浏览器 4.1 版本之前不起作用。
但我还没有找到任何官方证据。
我在不同版本的 Android 浏览器中测试了这个例子 http://jsfiddle.net/u88wbh10/4/
搭载 Android 4.1.2 操作系统的三星移动设备 - 可以工作。
搭载 Android 4.0.4 操作系统的索尼 Xperia 移动设备 - 不能工作。
这两个 Android 版本都内置了相同版本的 webkit。
在 stackoverflow 上有几个线程指出了这个问题。例如：http://stackoverflow.com/questions/5107651/android-disable-text-selection-in-a-webview
尽管 MDN 和 canisue.com 显示了从 Android 2.1 开始对“user-select”的支持
https://mdn.org.cn/en-US/docs/Web/CSS/user-select#Browser_compatibility
https://caniuse.cn/#search=user-select
有没有人遇到过同样的问题？
Abdullah Ahmed

评论永久链接# 2017 年 6 月 27 日

但您可以使用**pointer-events: none**。

pointer-events 属性允许控制 HTML 元素如何响应鼠标/触摸事件 - 包括 CSS 悬停/活动状态、Javascript 中的点击/轻触事件，以及光标是否可见。

Lampslave

# 2012 年 3 月 29 日

感谢这个技巧。您忘记在演示中添加 -ms-user-select 了，不是吗？

Cupidvogel

# 2012 年 6 月 11 日

尽管 Firefox、Chrome 和 Safari 都支持它，但实现方式略有不同。在 Firefox 中，当用户在给定元素上按下鼠标并沿着它拖动以复制文本时，光标保持默认类型（即如果它最初是十字形，它在拖动过程中仍然是十字形，如果它是指针，它仍然是指针），而在 Chrome 和 Safari 中，无论该元素的原始光标类型声明是什么，光标在拖动过程中都会变成十字形。

Chuck

# 2012 年 6 月 21 日

值得注意的是，您可以使用

-webkit-user-select: text;  /* Chrome all / Safari all */
-moz-user-select: text;     /* Firefox all */
-ms-user-select: text;      /* IE 10+ */

Tushar

评论永久链接# 2014 年 2 月 12 日
感谢 Chuck.. 真的帮了很大的忙…

虽然 Chrome 默认过滤文本框，但 Mozilla 在使用
```
*
{
user-select: none; 
}
```

David

# 2012 年 7 月 18 日

同样值得注意的是，-webkit-user-select 会导致当前版本的 Safari 出现重大卡顿。在基本页面上包含它后，我可以通过连续点击鼠标 6 次让 Safari 冻结。

David

评论永久链接# 2012 年 7 月 18 日

更新我的最后一句话。这只有在 Safari 必须渲染大约 7000 行文本的网页时才会变得明显。

Wk_of_Angmar

# 2012 年 8 月 16 日

在 Firefox 中，此属性值会影响元素的子元素，因此您也无法选择它们。即使手动覆盖子元素的 CSS 属性，您也无法选择它们。

如果您希望手动覆盖子元素的选择，则必须使用属性值“-moz-none”而不是“none”。

Bradley

评论永久链接# 2012 年 9 月 20 日

Angmar 的 Wk：感谢您！！！
Trevor

评论永久链接# 2012 年 9 月 25 日

谢谢！刚帮我省了不少麻烦。

Anselm Urban

# 2013 年 4 月 28 日

https://caniuse.cn/#feat=user-select-none

David Hemphill

# 2013 年 5 月 7 日

我在应用程序设置中很好奇，是否会不赞成在通用情况下将其设置为 none，然后为有意义的选择区域（一段文字、复制/粘贴界面等）启用它？对我来说，如果有人在页面内执行 Cmd/Ctrl-A 或无意中拖动过长，这似乎可以使体验更加无缝。

oluc

# 2013 年 5 月 22 日

我在同一行上具有可选择和不可选择的文本。

（终端命令，一些行的末尾有注释）

注释确实是不可选择的，如果我尝试选择它们。感谢这个技巧！

但是，当我选择多行（命令）时，它确实也会突出显示不可选择的部分（注释），尽管注释实际上并没有被选中（从我们复制/粘贴时看到的那样）。这是一个视觉上的故障，对用户来说很误导。

有人有禁用不可选择文本突出显示的技巧吗？

Sander

# 2013 年 6 月 29 日

Opera 15 将支持此功能，目前使用 -webkit 前缀。

Richard Kenny

# 2013 年 9 月 18 日

-webkit-user-select: none;

这会在 Safari 6.0.2 版本中破坏密码输入。

一个解决办法是定义一个单行 CSS，应用于您的密码输入

.safariPasswordWorkaround { -webkit-user-select: all; }

Lola

# 2013 年 10 月 9 日

这在 PDF 中有效吗？

Shekhar

# 2013 年 10 月 19 日

如果我想让文本真正不可选择（甚至无法通过源代码选择）怎么办？
实际上，我想显示一段很长的代码，但我希望它不可选择，这样其他用户就无法复制它。他们只能“查看”它。

可能的解决方案是什么？

Richard Kenny

评论永久链接# 2013 年 10 月 19 日

把它放在一个 gif 中。这是一个简单的解决方案。不过，这并不能阻止那些有空闲时间和文本编辑器的人复制它。

Clay Cooper

# 2014 年 2 月 12 日

如果在 Android 设备或任何地方仍然出现用户选择突出显示，您可能还需要使用-webkit-tap-highlight-color: rgba(0,0,0,0);。

David Condrey

# 2014 年 3 月 14 日

我喜欢尽可能跨浏览器、平台和版本保持最高级别的支持，并将这段代码拼凑起来，每当需要实现这种效果时我都会使用它…

1-webkit-touch-callout: none;-webkit-user-select: none;2-khtml-user-drag: none;-khtml-user-select: none;3-moz-user-select: none;-moz-user-select:-moz-none;-ms-user-select: none;4user-select: none;

1-webkit-touch-callout 属性允许您指定在用户点击并按住 iOS 上的链接时发生什么。默认值为 default，点击并按住链接会弹出一个链接气泡对话框；通过使用 none 值，该气泡永远不会弹出。
2-khtml 前缀早于 -webkit 前缀，并为 Safari 2.0 提供支持 -
3-moz 前缀被定义了两次，分别使用 none 和 -moz-none 值。使用 -moz-none 而不是 none 可以阻止元素和子元素被选中。但是，一些旧的浏览器（如 Netscape）无法识别 moz-none，因此仍然需要为它们定义 none。
4**不要忘记，非前缀属性应该放在最后一行。**

jim

# 2014 年 3 月 23 日

我更希望冲浪者磨练他们的鼠标技巧，而不是把 CSSx-de-jour 搞得乱七八糟。只是说… :-)

# 2014 年 3 月 23 日

我的页面包含大量用户生成的文本。用户经常希望“全选”以粘贴到电子邮件等地方。他们想要的文本分散在多个较长的“contenteditables”中（可以理解为 Google 文档，但多个文档在一个网页上）。“全选”是最合理的选项，因为选择和拖动需要大量滚动，而且当到达 contenteditable 的边界时，选择就会停止。

但“全选”也会选择页面的“镀铬”部分（导航等），而用户并不希望这样。

你可能会认为这个“user-select”属性就是我想要的，但它的工作方式（至少在 Firefox 中）是，“全选”会选择 user-select: none 的文本。

我想，让开发者过于容易地让用户难以选择文本，这存在一定的风险。不过，如果我们能找到解决方法，这可能是一件好事。

Malcolm Ocean

# 2015 年 4 月 14 日

我的 UI 有一排排内容，其中也有“按钮”，我试图阻止人们复制内容时将按钮的文本一起复制。我所做的就是将我不希望选择的文本从元素中剥离，而是通过 CSS :before 伪元素创建。它就像一个魅力一样工作了！

.item a.nevermind-x:before {
  content: "\2715";
}

Mark

# 2015 年 8 月 27 日

嘿，伙计们，CSS 'pointer-select: none;' 的行为完全相同，其中在 'select none' 标签内容之前或之后选择任何内容都会启用选择区域中所有内容的选择。这里有一个 cmd 处理黑客（在某个地方），CSS-Tricks 应该能够把它放到台面上：父级选择必须以某种方式对子 'select none' 元素做出反应。Prettify.js（“google.code.prettify”）很好地处理了这种焦点管理。HTML/CSS 解决方法？

…
pre { counter-reset: line; white-space: pre-wrap; }
code { counter-increment: line; }
pre code:before { content: counter(line); margin-right: 3rem; pointer-events: none; }
pre code:before { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

pre { counter-reset: line; }
code { counter-increment: line; }
code:before { content: counter(line); user-select: none; }

…

Mark

# 2015 年 8 月 27 日

好的，作为 cmd 对编码影响的示例，请考虑这段代码以显示插入符号的行为（抱歉，这里有限制，您必须在设备预览中关闭以下代码中的明显空格）

…
PRE 和 CODE 无法显示字面插入符号。插入符号的元素标签是手动编码的 &lt ; ‘<‘ 左插入符号和 &gt ; ‘>’ 右插入符号。
…

select-none 行为的显示反射几乎相同。将 pointer-events 附加到父 PRE，并将 user-select 附加到子 CODE（每行一个单独的 CODE 标签），父选择会在外部拖动进/出时发生。基于 Cmd 的干扰，外部没有明显的选择，粘贴选择会显示最后一个 pre-PRE 字符包含在复制的选择中。计数器和代码的行为是不允许从 PRE 或属性 CODE 计数器内部进行选择的。因此，google prettify.js 以某种方式使用属性作为我们缺少的黑客。这将是另一篇博客文章，发表在 CSS-Tricks 上。

anon

# 2015 年 12 月 12 日

基本上是一个 DRM 功能，我刚刚发现一个网站滥用了它。页面上的所有内容都可以选择，但文章中的内容除外。我想查看部分源代码以了解他们的 web2.0 恶意软件是如何工作的，但我发现他们正在阻碍这种行为。

FF 和所有现代浏览器只是专有的应用程序交付平台。出于这个原因，它们在 Windows 的某些方面很糟糕。用户应该掌握控制权，网站不应该在没有用户明确允许的情况下做愚蠢的事情。

roark

永久链接到评论# 2016 年 9 月 5 日

这个功能有大量的非 DRM 合法用例。以我个人为例，我正在构建一个自定义 WYSIWYG 编辑器。能够控制用户选择是当今构建的富应用程序所需的应用程序级别功能。

不幸的是，它在不同浏览器中的标准化程度仍然不高。尤其是当 contentEditable 参与进来时。

Mathias Bynens

# 2016 年 9 月 7 日

-webkit-user-select: all; /* Chrome 49+ */

…应该改为…

-webkit-user-select: all; /* Chrome 50+ */

Mathias Bynens

永久链接到评论# 2016 年 9 月 7 日

抱歉，我的意思是 Chrome 53+ 和 Opera 40。

Marcel

# 2016 年 12 月 21 日

如果你使用的是 Cordova 和 iOS，你需要做额外的工作来抑制文本选择气泡。 http://stackoverflow.com/questions/32812308/ios-cordova-long-press-shows-text-select-magnifying-glass-even-with-text-selecti

Tracy Goodwin

# 2018 年 2 月 19 日

谢谢！我知道这篇文章已经很久了，但我关闭了复制粘贴功能，因为其他网站窃取了我的作品并声称是他们的作品。但是，人们无法复制我提供的链接，而且博客更改了它的外观，我不知道如何关闭它。用一个词，他们就可以再次做到这一点：)

Jonathan Schofield (@schofeld)

# 2018 年 7 月 4 日

这在你想为用户提供更轻松/更干净的复制粘贴体验的情况下很有用。

事实证明，这对 Facebook 也很有用，他们将其用作一个 #暗模式，以阻止未登录的用户复制/粘贴 Facebook 帖子>:(

Nelson

# 2018 年 9 月 10 日

我试图让一些文本不可选且不可复制/粘贴。添加 user-select: none; 当我使用 Chrome 和纯文本编辑器（Atom）测试时，确实可以做到这一点。但是，当我粘贴到 Microsoft Word 时，我会得到我不希望选择/复制/粘贴的所有文本。我不熟悉剪贴板的工作原理，但这似乎很奇怪。有没有办法阻止文本从浏览器中复制并粘贴到 Microsoft Word 中？

旧的/专有的

更多信息

浏览器支持

台式机

移动/平板电脑

评论

发表回复 取消回复

发表回复取消回复