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

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

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

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

更新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> 

在大多数浏览器中,这可以通过使用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。

IE的JavaScript解决scheme是

 onselectstart="return false;" 

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

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

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

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

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

如果你想在除了<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; } 

你可以在Firefox和Safari(Chrome也可以)

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

在上述解决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> 

WebKit的解决方法:

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

我在一个CardFlip例子中find它。

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

另外,对于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*/ } 
 .hidden:after { content: attr(data-txt); } 
 <p class="hidden" data-txt="Some text you don't want to be selected"></p> 

加工

CSS:

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

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

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

如果你使用Less和Bootstrap,你可以写:

 .user-select(none); 

除了Mozilla的属性,不,只有标准的CSS(现在)没有办法禁用文本select。

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

这适用于某些浏览器:

 ::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。

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

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

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

注意:

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

在我们选择任何东西之前

我们选好之后

数字已被复制

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

testing: Ubuntu , Google Chrome 38.0.2125.111。

如果颜色select也不需要,这将是有用的:

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

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

这不是CSS,但值得一提:

jQuery UI禁用select :

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

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

虽然这个伪元素在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文本会引发可用性问题。

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

我从CSS-Tricks网站了解到。

 user-select: none; 

而且这也是:

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

你可以使用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> 
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 

尝试使用这一个:

 ::selection { background: transparent; } 

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

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

这种高亮效果是由于叫做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; } 

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