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

Question

对于作用类似于按钮的锚点（例如，此 StackOverflow 页面侧边栏上标题为问题、标签和用户的按钮）或者选项卡，是否有 CSS 标准方法可以在用户意外选择文本时禁用突出显示效果？

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

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

Answer 1

2017 年 1 月更新：

根据我可以使用，用于 Safari 的 user-select + -webkit-user-select 足以在所有主要浏览器中实现所需的行为。

---

这些是所有可用的正确 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 工作草案）。 它不能保证在所有地方都能工作，并且浏览器之间的实现可能存在差异。 此外，浏览器将来可能会放弃对其的支持。

---

更多信息请参阅 Mozilla 开发者网络文档。

该属性的值为none、text、toggle、element、elements 、全部和继承。

Answer 2

在大多数浏览器中，这可以使用 CSS user-select 属性的专有变体来实现，最初在 CSS 中提出，然后在 CSS 3 中被放弃，现在在 CSS UI 级别 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 < 10 和 Opera < 15、您将需要使用您希望不可选择的元素的 unselectable 属性。 您可以使用 HTML 中的属性来设置它：

<div id="foo" unselectable="on" class="unselectable">...</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的评论看来，可以通过添加一个在事件目标上设置unselectable的mousedown事件处理程序来避免这种情况。 有关详细信息，请参阅 http://jsbin.com/yagekiji/1。

---

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

Answer 3

直到 CSS 3 的 user-select 属性可用, 基于 Gecko 的浏览器支持 -moz-user-select< /code> 您已经找到的属性。 WebKit 和基于 Blink 的浏览器支持 -webkit-user-select财产。

当然，不使用 Gecko 渲染引擎的浏览器不支持这一点。

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

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

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

Answer 4

Internet Explorer 的 JavaScript 解决方案是：

onselectstart="return false;"

Answer 5

如果您想禁用除

元素之外的所有内容的文本选择，您可以在 CSS 中执行此操作（注意 -moz-none ，它允许覆盖子元素，在其他浏览器中允许使用 none）：

* {
    -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;
}

Answer 6

在前面答案的解决方案中，选择已停止，但用户仍然认为您可以选择文本，因为光标仍然发生变化。 为了保持静态，你必须设置 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>

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

Answer 7

您可以在 Firefox 和 Safari 中执行此操作（Chrome 也可以吗？）

::selection { background: transparent; }
::-moz-selection { background: transparent; }

Answer 8

WebKit 的解决方法：

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

我在 CardFlip 示例中找到了它。

Answer 9

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

要使

内的所有元素不可选择，请使用此 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 部分，因此您可能需要在其中添加版本检查。

Answer 10

您可以使用 CSS 或 JavaScript 来实现此目的。

JavaScript 方式在旧浏览器中受支持，例如旧版本的 Internet Explorer，但如果不是您的情况，请使用 CSS那么方式：

HTML/JavaScript：

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML/CSS：

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>

Answer 11

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

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

但这不是最好的方法。

Answer 12

另外对于 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  */
}

Answer 13

尝试将这些行插入 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;
}

Answer 14

快速破解更新

如果您对所有 CSS user-select 属性（包括其浏览器前缀）使用值 none，则会出现这仍然可能发生的问题。

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}

正如 CSS-Tricks 所说，问题 是：

如果您选择文本周围的元素，WebKit 仍然允许复制文本。

您还可以使用下面的方法来强制选择整个元素，这意味着如果您单击某个元素，则该元素中包含的所有文本都将被选择。 为此，您所需要做的就是将值 none 更改为 all。

.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  */
}

Answer 15

使用 SASS （SCSS 语法），

您可以使用 mixin：

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

在 HTML 标记中：

<div class="no-selectable">TRY TO HIGHLIGHT. YOU CANNOT!</div>

---

在此 CodePen。

如果您使用autoprefixer，您可以删除其他前缀。

浏览器兼容性< a href="https://caniuse.com/#feat=user-select-none" rel="nofollow noreferrer">此处。

Answer 16

对于那些在 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;
}

Answer 17

如果您使用的是 Less 和 Bootstrap 你可以写：

.user-select(none);

Answer 18

-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');

Answer 19

除了 Mozilla 独有的属性之外，没有办法仅使用标准 CSS 来禁用文本选择（截至目前）。

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

Answer 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;}

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

Answer 21

假设有两个像这样的 div：

.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>

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

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

Answer 22

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

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

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

Answer 23

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

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

Answer 24

注意：

正确答案是正确的，因为它阻止您选择文本。 但是，它不会阻止您复制文本，正如我将通过接下来的几个屏幕截图（截至 2014 年 11 月 7 日）所示。

如您所见，我们无法选择数字，但是我们能够复制它们。

测试环境：Ubuntu、谷歌浏览器 38.0.2125.111。

Answer 25

这很容易完成：

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

---

或者：

假设您有一个

Hello, World!

。 您必须删除该 h1 的innerHTML，在本例中为Hello, World。 然后你必须转到 CSS 并执行以下操作：

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}

现在它只是认为它是一个块元素，而不是文本。

Answer 26

为了获得我需要的结果，我发现我必须同时使用 ::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;
}

Answer 27

这不是 CSS，但值得一提：

jQuery UI 禁用选择：

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

Answer 28

检查我的没有 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/

Answer 29

我是从 CSS-Tricks 网站学习的。

user-select: none;

这还有：

::selection {
    background-color: transparent;
}

::moz-selection {
    background-color: transparent;
}

::webkit-selection {
    background-color: transparent;
}

Answer 30

第一种方法：（完全无意义）：

.no-select::selection, .no-select *::selection {
  background-color: Transparent;
}

.no-select { /* Sometimes I add this too. */
  cursor: default;
}

<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

片段：

.no-select::selection, .no-select *::selection {
  background-color: Transparent;
}

.no-select {
  /* Sometimes I add this too. */
  cursor: default;
}

<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

第二种方法（不包括任何废话）

.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

片段：

.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

首先，解决问题。 然后，编写代码。

约翰·约翰逊