如何禁用文本select突出显示使用CSS？

对于像button（例如，堆栈溢出页面顶部的问题 ， 标签 ， 用户等）或选项卡那样的锚点，如果用户意外地select文本，是否有CSS标准方法来禁用突出显示效果？

我意识到这可以通过JavaScript来完成，而且一些Googlesearch只能得到Mozilla-only -moz-user-select选项。

有没有符合标准的方法来完成这个CSS，如果不是，什么是“最佳实践”的方法？

Answer 1

更新2017年1月：

据我可以使用 ，除了Internet Explorer 9和更早的版本以外，所有的浏览器目前都支持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; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } 

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

Answer 2

在大多数浏览器中，这可以通过使用CSS user-select属性的专有变体来实现， 最初提出然后放弃在CSS3中 ，现在在CSS UI Level 4中提出：

 *.unselectable { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; /* Introduced in IE 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */ -ms-user-select: none; user-select: none; } 

对于IE <10和Opera <15，您需要使用您希望取消select的元素的不可选属性。 您可以使用HTML中的属性来设置它：

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

可悲的是，这个属性没有被inheritance，这意味着你必须在<div>的每个元素的开始标签中放置一个属性。 如果这是一个问题，你可以使用JavaScript来recursion地为元素的后代做这件事：

 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事件处理程序可以避免这种情况事件的目标。 有关详细信息，请参阅http://jsbin.com/yagekiji/1 。

---

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

Answer 3

IE的JavaScript解决scheme是

 onselectstart="return false;" 

Answer 4

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

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

没有“标准”兼容的快速简单的方法来做到这一点; 使用JavaScript是一个选项。

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

唯一可以看到这个function的地方是，如果你有一些表单的button，如果用户复制并粘贴网站，则不应该复制粘贴。

Answer 5

如果你想在除了<p>元素之外的所有东西上禁用文本select，你可以在CSS中执行这个操作（注意-moz-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

你可以在Firefox和Safari（Chrome也可以）

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

Answer 7

在上述解决scheme中select停止，但用户仍然认为您可以select文本，因为光标仍然在变化。 为了保持静态，你必须设置你的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 8

WebKit的解决方法：

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

我在一个CardFlip例子中find它。

Answer 9

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

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

 .draggable { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-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'); 

我想你仍然想要任何input元素是可交互的，因此:not()伪select器。 如果你不在乎，你可以使用'*' 。

警告：IE9可能不需要额外的jQuery文件，因此您可能需要在其中添加版本检查。

Answer 10

另外，对于Internet Explorer，您需要添加伪类焦点 （.ClassName：focus）和大纲样式：无 。

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

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

加工

CSS：

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

这应该是工作，但它不适用于旧的浏览器。 有一个浏览器兼容性问题。

Answer 13

对于那些在使用触摸事件的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 14

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

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

 .user-select(none); 

Answer 16

除了Mozilla的属性，不，只有标准的CSS（现在）没有办法禁用文本select。

如果你注意到，Stack Overflow不会禁止他们的导航button的文本select，我build议不要在大多数情况下这样做，因为它修改了正常的select行为，并使其与用户的期望冲突。

Answer 17

这适用于某些浏览器：

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

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

Answer 18

假设有两个这样的div

 .second { cursor: default; user-select: none; -webkit-user-select: none; /* Chrome/Safari/Opera */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/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 19

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

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

Answer 20

注意：

正确的答案是正确的，因为它阻止你能够select文本。 但是，这并不妨碍您复制文本，因为我将在接下来的几个截图中展示（截至2014年11月7日）。

正如你所看到的，我们无法select数字，但我们能够复制它们。

testing： Ubuntu ， Google Chrome 38.0.2125.111。

Answer 21

如果颜色select也不需要，这将是有用的：

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

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

Answer 22

这不是CSS，但值得一提：

jQuery UI禁用select ：

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

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

Answer 24

虽然这个伪元素在CSSselect器级别3的草稿中，但在候选推荐阶段，它被删除，因为它的行为似乎没有被规定，特别是在嵌套元素的情况下，互操作性没有达到。

在How :: selection对嵌套元素的工作中讨论了这个问题。

尽pipe它正在浏览器中实现，但是您可以通过使用与选项卡devise（在您的情况下）相同的颜色和背景颜色来使文本不被select。

普通的CSSdevise

 p { color: white; background: black; } 

在select

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

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

Answer 25

检查我的解决scheme没有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> 

Answer 26

我从CSS-Tricks网站了解到。

 user-select: none; 

而且这也是：

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

Answer 27

你可以使用CSS或者JavaScript ，旧的IE浏览器也支持JavaScript方式，但是如果不是这样的话，可以使用CSS方式：

HTML / JavaScript的：

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

Answer 28

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

Answer 29

尝试使用这一个：

 ::selection { background: transparent; } 

如果你想指定不在特定的元素内部进行select，只需在select规则之前放置元素类或者id，比如：

 .ClassNAME::selection { background: transparent; } #IdNAME::selection { background: transparent; } 

Answer 30

这种高亮效果是由于叫做hover（onMouseHover）的动作造成的。 当你将鼠标hover在任何选项卡上的颜色将会改变。 只是举个例子。

 <div class="menu"> <ul class="effect"> <li>Questions </li> <li>JOBS </li> <li>Users</li> </ul> </div> <!-- CSS CODE --> .effect:hover{ color: none; } 

你可以给任何颜色，如果你想突出显示，否则你可以不给。