小开

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

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

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

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

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

小开

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

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

小开

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

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

小开

Internet Explorer的JavaScript解决方案是：

onselectstart="return false;"

小开

在大多数浏览器中，这可以使用CSSuser-select属性的专有变体来实现，最初提出，然后在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属性。您可以使用超文本标记语言中的属性进行设置：

<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）中，仍然无法阻止在不可选择元素之前开始和结束的选择，而不会使整个文档不可选择。

小开

2017年1月更新：

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

以下是所有可用的正确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, currentlysupported by Chrome, Edge, Opera and Firefox */}

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

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

更多信息可以在Mozilla Developer Network留档中找到。

此属性的值为none、text、toggle、element、elements、all和inherit。

小开

如果您想禁用除<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;}

小开

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部分，因此您可能需要在其中添加版本检查。

小开

如果你使用更少和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');

小开

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

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

小开

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

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

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

小开

这不是CSS，但值得一提：

jQuery UI禁用选择：

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

小开

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

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

It's not the best way, though.

小开

此外，对于Internet Explorer，您需要添加伪类#0（. ClassName：焦点）和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  */}

小开

检查我的没有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选择器级别3的草稿中，但它在候选推荐阶段被删除，因为它的行为似乎没有得到充分的指定，尤其是嵌套元素，并且没有实现互操作性。

它在::选择如何作用于嵌套元素中被讨论。

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

普通CSS设计

p { color: white;  background: black; }

关于选择

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

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

小开

这适用于一些浏览器：

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

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

小开

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

小开

注：

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

在我们选择任何东西之前

选择之后

数字已被复制

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

测试：ubuntu，GoogleChrome 38.0.2125.111。

小开

为了得到我需要的结果，我发现我必须同时使用#0和#1

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

小开

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

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

小开

尝试使用这个：

::selection {background: transparent;}

如果您希望在特定元素中指定not选择，只需将元素类或id放在选择规则之前，例如：

.ClassNAME::selection {background: transparent;}#IdNAME::selection {background: 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>

将光标设置为默认值，以便为用户提供不可选择的感觉。

需要使用前缀才能在所有浏览器中支持它。如果没有前缀，这可能无法在所有答案中工作。

小开

我从CSS技巧网站学到的。

user-select: none;

这也是：

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

小开

这种突出显示效果是由于名为悬停（onMouseHover）的操作。

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

举个例子，

超文本标记语言代码

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

css代码

.effect:hover {color: none;}

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

小开

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

小开

您可以使用*-user-select属性如下…

p {-webkit-user-select: none;  /* Chrome all and Safari all */-moz-user-select: none;     /* Firefox all */-ms-user-select: none;      /* Internet Explorer 10 and later */user-select: none;          /* Likely future */}

详细说明的链接

小开

也许你可以通过:before使用这个解决方案：

nav li {display: inline-block;position: relative;}
nav li a {display: inline-block;padding: 10px 20px;}
nav li a:hover {color: red;}
nav li.disabled:before {content: '';position: absolute;top: 0;left: 0;bottom: 0;right: 0;}

<nav><ul><li><a href="#">Link</a></li><li class="disabled"><a href="#">Link</a></li><li><a href="#">Link</a></li></ul></nav>

JsFiddle-https://jsfiddle.net/grinmax_/9L1cckxu/

小开

您可以使用css或javascript。

老年浏览器支持javascript方式，例如的版本的Internet Explorer，但如果不是您的情况，请使用CSS方式：

超文本标记语言/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>

超文本标记语言/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>

小开

更好的是，您可以禁用文本选择。

如果您喜欢Sass（SCSS），并且不想使用指南针，您可以这样做：

styles.scss

@mixin user-select($select) {-webkit-touch-callout:#{$select};@each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {#{$pre + user-select}: #{$select};}#{user-select}: #{$select};}
.no-select {@include user-select(none);}

小开

我将各种浏览器CSS选择属性与Internet Explorer<9所需的不可选择标记相结合。

<style>[unselectable="on"] {-webkit-user-select: none; /* Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* Internet Explorer 10+/Edge */user-select: none; /* Standard */}</style><div unselectable="on">Unselectable Text</div>

小开

快速黑客更新

如果您对所有CSSuser-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技巧所说，问题是：

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

您还可以使用下面的1到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  */}

小开

如果您想使用CSS禁用整个页面的选择和突出显示，您可以轻松地将其应用于所有元素：

* {-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, currentlysupported by Chrome and Opera */}

小开

与CSS-

div {-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;-o-user-select: none;
"unselectable='on' onselectstart="return false;"onmousedown="return false;}

<div>Blabla<br/> More Blabla<br/> More Blabla...</div>

小开

::selection {background: transparent; color: transparent;}
::-moz-selection {background: transparent; color: 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>。您必须删除该h1的innerHTML，在本例中为你好，世界。然后您必须转到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.}

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

小开

你可能还想阻止在触摸按钮等元素时出现上下文菜单。为此，请将此代码添加到整个页面，或者只是那些按钮元素：

$("body").on("contextmenu",function(e){return false;});

小开

SASS（SCSS语法）

您可以使用混合：

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

在超文本标记语言中：

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

试试看在这里代码笔。

如果您使用的是autopre修复程序您可以删除其他前缀。

浏览器兼容性这里。

小开

这可能有用

    ::selection {color: none;background: none;}/* For Mozilla Firefox */::-moz-selection {color: none;background: none;}

小开

向您的CSS添加一个类，该类定义您不能选择或突出显示元素。我有一个例子：

<style>.no_highlighting{user-select: none;}
.anchor_without_decoration:hover{text-decoration-style: none;}</style>
<a href="#" class="anchor_without_decoration no_highlighting">Anchor text</a>

小开

你试过这个吗？

.disableSelect{user-select: none;-webkit-user-select: none;-ms-user-select: none;-webkit-touch-callout: none;-o-user-select: none;-moz-user-select: none;
pointer-events:none;}

小开

我看到了许多详细的答案，但我相信仅编写这行代码就足以完成所需的任务：

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

小开

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

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

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

如何禁用文本选择高亮