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

Posted 2023-03-05

【中文标题】如何禁用文本选择突出显示

【英文标题】：How to disable text selection highlighting

【发布时间】：2010-10-24 00:43:16

【问题描述】：

对于作用类似于按钮的锚点（例如 Questions、Tags、Users 等，它们位于 Stack 的顶部溢出页面）或选项卡，如果用户不小心选择了文本，是否有 CSS 标准方法来禁用突出显示效果？

我意识到这可以通过 javascript 完成，并且通过谷歌搜索得到了 Mozilla 独有的 -moz-user-select 选项。

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

【问题讨论】：

元素中的元素是否可以禁用突出显示，是否在样式或类属性中的 CSS 中启用了突出显示？或者换句话说，-webkit-user-select 等是否还有其他值。除了没有？

相关：***.com/questions/16600479/… = 如何只允许选择部分子元素

在某些浏览器中存在一个错误，即执行“全选”（CTRL+A 和 CMD+A）仍然会选择内容。这可以用透明的选择颜色来解决：::selection background: transparent; ::-moz-selection background: transparent;

我只能说：请不要这样做。根据我的经验，我经常想要选择一些也用作按钮的文本，然后将其复制粘贴到其他地方。无法做到这一点会令人难以想象的愤怒，因为一些 Web 开发人员特意为我禁用了此功能。所以请不要这样做，除非你有一个非常、非常很好的理由。

2017年，最好使用postcss和autoprefixer设置浏览器版本，然后postcss让一切变得更酷。

【参考方案1】：

在 CSS 3 的 user-select 属性可用之前，基于 Gecko 的浏览器支持您已经找到的 -moz-user-select 属性。 WebKit 和基于 Blink 的浏览器支持 -webkit-user-select 属性。

这在不使用 Gecko 渲染引擎的浏览器中当然是不支持的。

没有符合“标准”的快速简便的方法；使用 JavaScript 是一种选择。

真正的问题是，为什么您希望用户不能突出显示并可能复制和粘贴某些元素？我从来没有遇到过我不想让用户突出显示我网站的某个部分的情况。我的几个朋友在花费大量时间阅读和编写代码后，会使用高亮功能来记住他们在页面上的位置，或者提供一个标记以便他们的眼睛知道下一步该往哪里看。

我认为这很有用的唯一地方是，如果您有用于在用户复制和粘贴网站时不应复制和粘贴的表单按钮。

【讨论】：

这对于嵌入式设备可能是必需的。即使用浏览器呈现 UI 的设备。

需要这样做的另一个原因是按住 Shift 并单击以选择网格或表格中的多行。您不想突出显示文本，而是希望它选择行。

高度交互的网络应用程序，需要大量拖放...意外突出显示是一个很大的可用性问题。

【参考方案2】：

除了 Mozilla-only 属性，不，没有办法仅使用标准 CSS 禁用文本选择（截至目前）。

如果您注意到，Stack Overflow 不会为其导航按钮禁用文本选择，我建议在大多数情况下不要这样做，因为它会修改正常的选择行为并使其与用户的期望相冲突。

【讨论】：

虽然我同意它会改变用户期望的行为，但对于位于此表单字段旁边的“添加评论”按钮之类的东西还是有意义的......

但这不会暴露不必要的实现细节吗？无法选择输入或按钮的文本。

@anon：大多数用户可能不会尝试选择按钮的文本，所以在实践中，它应该不是很重要。此外，为了这样做，他们必须开始选择按钮的outside——如果他们在按钮本身内部单击，onclick 处理程序将改为激活。另外，某些浏览器（例如 Safari）实际上允许您选择普通按钮的文本……

如果您从聊天线程中选择一组 cmets，并且每个评论旁边都有一个赞成/反对票按钮，那么最好选择没有其他内容的文本。这就是用户期望或想要的。他不想在每条评论中复制/粘贴按钮标签。

如果您例如双击一个按钮而不是将您重定向到另一个页面会打开一个 div 怎么办？然后由于双击，按钮的文本将被选中！

【参考方案3】：

您可以在 Firefox 和 Safari（Chrome 也可以？）中这样做

::selection  background: transparent; 
::-moz-selection  background: transparent; 

【讨论】：

我不建议这样做，因为它实际上并不能解决问题；禁用文本选择 - 它只是隐藏它。这会导致可用性不佳，因为如果我在页面上拖动光标，我可能会在不知情的情况下选择任意文本。这可能会导致各种奇怪的可用性“错误”。

不适用于具有透明区域的 PNG 图像：将始终选择浅蓝色...任何解决方法？

【参考方案4】：

Internet Explorer 的 JavaScript 解决方案是：

onselectstart="return false;"

【讨论】：

别忘了ondragstart！

【参考方案5】：

在大多数浏览器中，这可以使用 CSS user-select 属性的专有变体来实现，originally proposed and then abandoned in CSS 3 现在在 CSS UI Level 4 中提出：

*.unselectable 
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;

对于 Internet Explorer Opera unselectable 属性。您可以使用 HTML 中的属性进行设置：

<div id="foo" unselectable="on" class="unselectable">...</div>

遗憾的是，此属性不是继承的，这意味着您必须在<div> 内每个元素的开始标记中放置一个属性。如果这是一个问题，您可以改为使用 JavaScript 为元素的后代递归地执行此操作：

function makeUnselectable(node) 
    if (node.nodeType == 1) 
        node.setAttribute("unselectable", "on");
    
    var child = node.firstChild;
    while (child) 
        makeUnselectable(child);
        child = child.nextSibling;
    


makeUnselectable(document.getElementById("foo"));

---

2014 年 4 月 30 日更新：每当向树中添加新元素时，都需要重新运行此树遍历，但从 @Han 的评论看来，可以通过添加来避免这种情况一个mousedown 事件处理程序，在事件目标上设置unselectable。详情请见http://jsbin.com/yagekiji/1。

---

这仍然没有涵盖所有可能性。虽然无法在不可选择的元素中启动选择，但在某些浏览器（例如 Internet Explorer 和 Firefox）中，仍然无法阻止在不可选择元素之前和之后开始和结束的选择，而不会使整个文档不可选择。

【讨论】：

你应该从你的例子中删除 * 选择器，它真的效率低下，真的不需要在你的例子中使用它吗？

@Blowsie：我不这么认为：CSS 2 规范指出 *.foo 和 .foo 完全等效（在第二种情况下，隐含通用选择器 (*) )，所以除非浏览器怪癖，我看不出包含* 会损害性能。包含* 是我的一个长期习惯，我最初是为了可读性而开始这样做的：它一目了然地明确指出作者打算匹配所有元素。

oooh 经过进一步阅读，似乎 * 仅在将其用作键（最右边的选择器）时才无效，即 .unselectable * 。更多信息在这里code.google.com/speed/page-speed/docs/…

不要使用 class="unselectable"，而是使用属性选择器 [unselectable="on"] …

【参考方案6】：

2017 年 1 月更新：

根据Can I use，目前所有浏览器都支持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>

---

请注意，user-select 正处于标准化过程中（目前处于 W3C working draft 中）。它不能保证在任何地方都可以工作，并且浏览器之间的实现可能存在差异。此外，浏览器将来可能会放弃对它的支持。

---

更多信息可以在Mozilla Developer Network documentation找到。

这个属性的值是none、text、toggle、element、elements、all和inherit。

【讨论】：

不错的代码 molokoloco :D ，虽然我个人会远离使用它，因为有时您可能需要不同浏览器的不同值，并且它依赖于 JavaScript。创建一个类并将其添加到您的元素或将 css 应用于样式表中您的元素类型是非常安全的。

'user-select'- 值：无 |正文 |切换 |元素 |元素 |全部 |继承 - w3.org/TR/2000/WD-css3-userint-20000216

这太荒谬了！这么多不同的方法来做同样的事情。让我们为用户选择制定一个新标准。我们称之为standard-user-select。那么我们就不会有这些问题了。尽管为了向后兼容，我们也应该包括其他的。所以现在代码变成了-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;。啊，好多了。

根据 caniuse 的说法，它似乎不再需要这些前缀了。

@aderchox 在这种情况下，caniuse.com 是错误的。我仍然需要在 iOS 15.1 上使用 Safari 的 -webkit-user-select: none; 行。

【参考方案7】：

如果您想禁用除 <p> 元素之外的所有内容的文本选择，您可以在 CSS 中执行此操作（注意 -moz-none，它允许在子元素中覆盖，这在其他浏览器中允许使用 @987654323 @):

* 
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;


p 
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;

【讨论】：

确保您还可以选择输入字段：p, input -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text;

对于关闭浏览器 UI 对除一项之外的所有代码的预期非常谨慎。例如，列表项 文本呢？

只是一个更新...根据 MDN，因为 Firefox 21 -moz-none 和 none 是相同的。

为此您可以分别添加 cursor:default 和 cursor:text :)

THE 炸弹。也就是说。结束。 ul>* -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; [选择无序列表中的所有内容，并使其不可选择，而不是破坏整个视图树。] 感谢您的课程。我的按钮列表看起来很棒，并且可以正确响应屏幕点击和按下，而不是启动 IME（android 剪贴板小部件）。

【参考方案8】：

WebKit 的解决方法：

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

我在 CardFlip 示例中找到了它。

【讨论】：

使用 transparent 代替 rgba 也适用于 Android 上的 Chrome 42。

【参考方案9】：

我喜欢混合 CSS + jQuery 的解决方案。

要使<div class="draggable"></div> 中的所有元素不可选择，请使用以下 CSS：

.draggable 
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;


.draggable input 
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
         -o-user-select: text;
            user-select: text;
 

然后，如果您使用的是 jQuery，请将其添加到 $(document).ready() 块中：

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

我认为您仍然希望任何输入元素都是可交互的，因此:not() 伪选择器。如果您不在乎，可以改用'*'。

警告：Internet Explorer 9 可能不需要这个额外的 jQuery 片段，因此您可能需要在其中添加版本检查。

【讨论】：

使用-ms-user-select：无； （对于 IE10）和你的 jQuery “if”应该是这样的： if (($.browser.msie && $.browser.version

小心男人！！！要使其在 Firefox 中可选，您必须使用 -moz-user-select: Normal;

@mhenry1384 jQuery.browser 自 1.3 版起已弃用，并已在 1.9 版中删除 - api.jquery.com/jQuery.browser

@Wynand 好点。但是存在什么样的“特征检测”来确定使用哪个 CSS 属性？

@TomAuger 您可以使用 jQuery.support，它允许您检查单个功能：Link

【参考方案10】：

如果你使用Less 和Bootstrap，你可以这样写：

.user-select(none);

【参考方案11】：

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable 
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;

<div id="foo" unselectable="on" class="unselectable">...</div>

function makeUnselectable(node) 
    if (node.nodeType == 1) 
        node.unselectable = true;
    
    var child = node.firstChild;
    while (child) 
        makeUnselectable(child);
        child = child.nextSibling;
    


makeUnselectable(document.getElementById("foo"));

-webkit-user-select: none;
-moz-user-select: none;

onselectstart="return false;"

::selection  
    background: transparent; 


::-moz-selection  
    background: transparent; 


* 
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;


p 
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;

<div class="draggable"></div>

.draggable 
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;


.draggable input 
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
 

if ($.browser.msie)
    $('.draggable').find(':not(input)').attr('unselectable', 'on');

【参考方案12】：

将此添加到要禁用文本选择的第一个 div：

onmousedown='return false;' 
onselectstart='return false;'

【参考方案13】：

如果也不需要颜色选择，这将很有用：

::-moz-selection  background:none; color:none; 
::selection  background:none; color:none; 

...所有其他浏览器修复。它将在Internet Explorer 9 或更高版本中工作。

【讨论】：

也许是color: inherit;。

是的，我喜欢它。根据Mozilla docs

，它是 css 选择器级别 3

【参考方案14】：

这不是 CSS，但值得一提：

jQuery UI Disable Selection:

$("your.selector").disableSelection();

【参考方案15】：

.hidden:after 
    content: attr(data-txt);

<p class="hidden" data-txt="Some text you don't want to be selected"></p>

不过，这不是最好的方法。

【讨论】：

你也可以使用title作为属性。

这是一个非常有创意的解决方案。尤其是如果它使用了 title 属性，因为这对于屏幕阅读器来说可能会更好。

我试过了 (JSBin) 但它在 IE 中不起作用。不幸的是，旧的 IE 是唯一不适合 user-select 的。

这是一个很棒的非 JS 替代品，适用于 Chrome！太棒了！

这是我需要阻止实际选择而不仅仅是阻止选择的显示。

【参考方案16】：

另外对于Internet Explorer，您需要添加伪类focus (.ClassName:focus) 和outline-style: none。

.ClassName,
.ClassName:focus 
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */

【讨论】：

这在 IE 中确实有效，只要选择从具有 className 类的元素开始。看到这个JSBin。

【参考方案17】：

在没有 JavaScript 的情况下检查我的解决方案：

jsFiddle

li:hover 
    background-color: silver;

#id1:before 
    content: "File";

#id2:before 
    content: "Edit";

#id3:before 
    content: "View";

<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

应用了我的技术的弹出菜单：http://jsfiddle.net/y4Lac/2/

【参考方案18】：

工作

CSS：

-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;

这应该可以，但不适用于旧版浏览器。存在浏览器兼容性问题。

【讨论】：

无前缀 CSS 属性必须严格位于该属性的前缀版本列表的末尾。这是很好的正确做法，另一种是不好的做法，从 Chrome/Webkit 制作“新 IE”并导致在非 webkit 浏览器中引入 -webkit 前缀支持这么多丑陋的事情。看，这已经是 2012 年了：dev.opera.com/articles/…

我引用：This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects.

【参考方案19】：

虽然这个伪元素在 CSS 选择器级别 3 的草案中，但在候选推荐阶段被删除，因为它的行为似乎没有明确说明，尤其是嵌套元素，并且没有实现互操作性。

How ::selection works on nested elements 正在讨论它。

尽管它是在浏览器中实现的，但您可以通过在选择时使用与选项卡设计相同的颜色和背景颜色来制造未选择文本的错觉（在您的情况下）。

普通 CSS 设计

p  color: white;  background: black; 

选择时

p::-moz-selection  color: white;  background: black; 
p::selection       color: white;  background: black; 

不允许用户选择文本会引发可用性问题。

【讨论】：

这一定是Netbeans自动补全不知道我在说什么的原因！

【参考方案20】：

这适用于一些浏览器：

::selection background-color: transparent;
::moz-selection background-color: transparent;
::webkit-selection background-color: transparent;

只需在选择器前面添加所需的元素/ID，用逗号分隔，不带空格，如下所示：

h1::selection,h2::selection,h3::selection,p::selection background-color: transparent;
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection background-color: transparent;
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection background-color: transparent;

其他答案更好；这可能应该被视为最后的手段/总括。

【讨论】：

可以肯定知道的事情很少，但这个解决方案肯定不适用于所有浏览器。

【参考方案21】：

对于那些在 Android 浏览器中无法通过触摸事件实现相同功能的用户，请使用：

html, body 
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;

【参考方案22】：

注意：

正确答案是正确的，因为它会阻止您选择文本。但是，它并不妨碍您复制文本，我将在接下来的几张屏幕截图中展示（截至 2014 年 11 月 7 日）。

如您所见，我们无法选择数字，但我们可以复制它们。

测试于：Ubuntu、Google Chrome 38.0.2125.111。

【讨论】：

我也遇到了同样的问题。在 Mac Chrome 48.0.2564.116 和 Mac Safari 9.0.3 上。值得注意的是，Mac Firefox 43.0 不会复制字符，而是在它们之间添加额外的结束线。对此应该怎么办？

【参考方案23】：

为了得到我需要的结果，我发现我必须同时使用 ::selection 和 user-select

input.no-select:focus 
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;


input.no-select::selection 
    background: transparent;


input.no-select::-moz-selection 
    background: transparent;

【参考方案24】：

在先前答案的解决方案中，选择已停止，但用户仍认为您可以选择文本，因为光标仍在更改。为了保持静态，您必须设置 CSS 光标：

.noselect 
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

这将使您的文本完全平坦，就像在桌面应用程序中一样。

【讨论】：

“扁平”而不是什么？

@kojow7 与“分层”相反。而不是漂浮在其他元素之上的文本。类似于 SVG 和 PNG 图片的区别。

惊讶地发现 Firefox 在 2019 年仍然需要​​供应商前缀。我忽略了只使用了 user-select: none;，以为现在会采用该标准，但遗憾的是它没有。让你想知道标准委员会的人还在争论什么。 “不，你们……我真的认为应该是user-select: cant;，因为它更像是描述性的，你知道吗？” “我们已经解决了这个问题，迈克。我们将不得不省略撇号，这是一种糟糕的形式！” “够了，大家！我们下个月再讨论这件事。标准委员会会议休会！”

【参考方案25】：

尝试使用这个：

::selection 
    background: transparent;

如果你想指定在特定元素内不选择，只需将元素类或id放在选择规则之前，例如：

.ClassNAME::selection 
    background: transparent;

#IdNAME::selection 
    background: transparent;

【讨论】：

这根本不会禁用选择...它只会使它不可见

【参考方案26】：

假设有两个这样的divs：

.second 
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */

<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

将光标设置为默认值，这样它会给用户一种无法选择的感觉。

所有浏览器都需要使用前缀来支持它。如果没有前缀，这可能不适用于所有答案。

【参考方案27】：

我是从CSS-Tricks网站了解到的。

user-select: none;

还有这个：

::selection 
    background-color: transparent;


::moz-selection 
    background-color: transparent;


::webkit-selection 
    background-color: transparent;

【讨论】：

它只会让它不可见

【参考方案28】：

用途：

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

【讨论】：

请添加有关您的解决方案的详细信息

【参考方案29】：

这种高亮效果是由名为hover (onMouseHover) 的动作引起的。

当您将鼠标悬停在任何选项卡上时，其颜色将发生变化。

举个例子，

HTML 代码

<div class="menu">
    <ul class="effect">
        <li>Questions</li>
        <li>JOBS</li>
        <li>Users</li>
    </ul>
</div>

CSS 代码

.effect:hover 
    color: none;

如果您想突出显示它，您可以使用任何颜色。否则你可以使用none。

【讨论】：

不，你说的是悬停，意思是“当鼠标悬停在文本上时”。它不同于“选择文本”。默认情况下，悬停时没有颜色。

【参考方案30】：

尝试将这些行插入 CSS 并在类属性中调用“disHighlight”：

.disHighlight 
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;