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

对于充当按钮的锚（例如，“堆栈溢出”页面顶部的“ 问题”，“ 标签”，“ 用户 ”等）或选项卡，是否存在CSS标准方法来禁用突出显示效果（如果用户不小心选择了文本）？

我意识到可以使用JavaScript来完成此操作，并且经过一番搜寻后得出了仅适用于Mozilla的-moz-user-select选项。

是否有使用CSS的符合标准的方法，如果没有，“最佳实践”方法是什么？

2017年1月更新：

根据我可以使用，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工作草案中）。不能保证它在任何地方都能工作，并且浏览器的实现可能会有所不同，将来浏览器可能会放弃对此的支持。

可以在Mozilla开发人员网络文档中找到更多信息。

在大多数浏览器中，可以使用CSS user-select属性的专有变体来实现此目的，该属性最初是在CSS 3中提出，然后在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 <10和Opera <15，您将需要使用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）中，仍然无法防止在不可选择的元素之前和之后开始的选择而不会使整个文档不可选择。

Internet Explorer的JavaScript解决方案是：

onselectstart="return false;"

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

当然，在不使用Gecko渲染引擎的浏览器中不支持此功能。

没有兼容“标准”的快捷方法。使用JavaScript是一种选择。

真正的问题是，为什么您希望用户无法突出显示并可能复制并粘贴某些元素？我没有一次不想让用户强调我网站的特定部分。我的几个朋友在花费大量时间阅读和编写代码之后，将使用突出显示功能来记住他们在页面上的位置，或者提供标记以使他们的眼睛知道接下来要去哪里。

我能看到的唯一有用的地方是，如果您有用于表单的按钮，并且用户复制并粘贴了网站，则该按钮不应被复制并粘贴。

如果您要禁用除<p>元素以外的所有内容的文本选择，则可以在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;
}

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

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

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

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

WebKit的解决方法：

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

我在CardFlip示例中找到了它。

我喜欢混合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，因此您可能需要在其中添加版本检查。

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

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

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

您可以为此使用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>

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

尝试将这些行插入CSS并在class属性中调用“ 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;
}

快速黑客更新

如果将值none用于所有CSS user-select属性（包括它的浏览器前缀），则可能会出现此问题。

.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仍然允许复制文本。

您还可以使用下面的一个来enforce选择整个元素，这意味着如果单击某个元素，则包装在该元素中的所有文本都将被选择。为此，您要做的就是将值更改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  */
}

对于那些在触摸事件中无法在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;
}

如果使用Less and Bootstrap，则可以编写：

.user-select(none);

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

工作中

CSS：

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

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

使用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</div>

在此CodePen中尝试。

如果使用自动前缀，则可以删除其他前缀。

浏览器兼容性在这里。

除了仅Mozilla的属性外，没有，没有办法仅使用标准CSS禁用文本选择（到目前为止）。

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

在某些浏览器中可以使用：

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

其他答案更好。这可能应该被视为不得已而为之。

假设有两个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>

将光标设置为默认，以便给用户带来无法选择的感觉。

在所有浏览器中都需要使用前缀来支持它。没有前缀，可能无法在所有答案中使用。

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

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

...所有其他浏览器修复程序。它可以在Internet Explorer 9或更高版本中使用。

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

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

注意：

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

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

测试于：Ubuntu，Google Chrome 38.0.2125.111。

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

这很容易做到：

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

或者：

假设您有一个<h1 id="example">Hello, World!</h1>。您将必须删除其中的innerHTML h1，在本例中为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.
}

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

这不是CSS，但值得一提：

jQuery UI禁用选择：

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

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

尽管此伪元素在CSS Selectors Level 3的草稿中，但在“候选推荐书”阶段已被删除，因为它的行为似乎没有得到充分说明，尤其是使用嵌套元素时，并且无法实现互操作性。

:: selection如何在嵌套元素上进行讨论。

尽管已在浏览器中实现了该功能，但您可以通过使用与选项卡设计相同的颜色和背景色（针对您的情况），使未选择的文本产生错觉。

普通CSS设计

p { color: white;  background: black; }

选择时

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

禁止用户选择文本会引起可用性问题。