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

For anchors that act like buttons (for example, Questions, Tags, Users, etc. at the top of the Stack Overflow page) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text?

对于像按钮(例如，在堆栈溢出页面顶部的问题、标记、用户等)或选项卡那样的锚点，如果用户不小心选择了文本，是否有CSS标准的方法来禁用突出显示效果?

I realize this could be done with JavaScript, and a little googling yielded the Mozilla-only -moz-user-select option.

我意识到这可以通过JavaScript来实现，稍微google一下就得到了纯mozilla - mozilla -user-select选项。

Is there a standard-compliant way to accomplish this with CSS, and if not, what is the "best practice" approach?

是否有一种符合标准的方式来实现CSS，如果没有，什么是“最佳实践”方法?

37 个解决方案

#1

UPDATE January, 2017:

2017年1月更新):

According to Can I use, the user-select is currently supported in all browsers except Internet Explorer 9 and earlier versions (but sadly still needs a vendor prefix).

根据Can I use，用户选择目前在所有浏览器中都得到支持，除了Internet Explorer 9和早期版本(但遗憾的是仍然需要一个供应商前缀)。

---

All of the correct CSS variations are:

所有正确的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>

---

Note that it's a non-standard feature (i.e. not a part of any specification). It is not guaranteed to work everywhere, and there might be differences in implementation among browsers and in the future browsers can drop support for it.

注意，它是一个非标准的特性(也就是说，它不是任何规范的一部分)。它并不能保证在任何地方都能正常工作，而且在浏览器之间可能存在实现上的差异，将来的浏览器可能会放弃对它的支持。

---

More information can be found in Mozilla Developer Network documentation.

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

#2

In most browsers, this can be achieved using proprietary variations on the CSS user-select property, originally proposed and then abandoned in CSS3 and now proposed in CSS UI Level 4:

在大多数浏览器中，可以使用CSS用户选择属性的专有变体来实现这一点，该属性最初在CSS3中被提出，现在在CSS UI级别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;}

For IE < 10 and Opera < 15, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:

对于IE < 10和Opera < 15，您需要使用您希望不可选的元素的不可选属性。您可以使用HTML中的属性设置此属性:

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

Sadly this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the <div>. If this is a problem, you could instead use JavaScript to do this recursively for an element's descendants:

遗憾的是，这个属性不是继承的，这意味着您必须在

中每个元素的开始标记中添加一个属性。如果这是一个问题，那么您可以使用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"));

---

Update 30 April 2014: This tree traversal needs to be re-run whenever a new element is added to the tree, but it seems from a comment by @Han that it is possible to avoid this byadding a mousedown event handler that sets unselectable on the target of the event. See http://jsbin.com/yagekiji/1 for details.

2014年4月30日更新:每当向树添加新元素时，都需要重新运行此树遍历，但从@Han的一条评论来看，通过添加一个mousedown事件处理程序来设置事件目标上的不可选性，可以避免这种情况。有关详细信息,请参阅http://jsbin.com/yagekiji/1。

---

This still doesn't cover all possibilities. While it is impossible to initiate selections in unselectable elements, in some browsers (IE and Firefox, for example) it's still impossible to prevent selections that start before and end after the unselectable element without making the whole document unselectable.

这仍然不能涵盖所有的可能性。虽然不可能在不可选元素中初始化选择，但在某些浏览器(例如IE和Firefox)中，如果不使整个文档不可选，则仍然不可能阻止从不可选元素开始和结束的选择。

#3

A JavaScript solution for IE is

IE的一个JavaScript解决方案是。

onselectstart="return false;"

#4

Until CSS 3's user-select property becomes available, Gecko-based browsers support the -moz-user-select property you already found. WebKit and Blink-based browsers support the -webkit-user-select property.

在CSS 3的用户选择属性可用之前，基于geck的浏览器支持您已经找到的- mozilla用户选择属性。WebKit和基于blink的浏览器支持WebKit -用户选择属性。

This of course is not supported in browsers that do not use the Gecko rendering engine.

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

There is no "standards" compliant quick-and-easy way to do it; using JavaScript is an option.

没有遵循“标准”的快速简便的方法;使用JavaScript是一种选择。

The real question is, why do you want users to not be able to highlight and presumably copy and paste certain elements? I have not come across a single time that I wanted to not let users highlight a certain portion of my website. Several of my friends, after spending many hours reading and writing code will use the highlight feature as a way to remember where on the page they were, or providing a marker so that their eyes know where to look next.

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

The only place I could see this being useful is if you have buttons for forms that should not be copy and pasted if a user copy and pasted the website.

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

#5

If you want to disable text selection on everything except on <p> elements, you can do this in CSS (watch out for the -moz-none which allows override in sub-elements, which is allowed in other browsers with none):

如果你想要在除

元素外的所有元素上禁用文本选择，你可以在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;}

#6

In the above solutions selection is stopped, but the user still thinks you can select text because the cursor still changes. To keep it static, you'll have to set your CSS cursor:

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

This will make your text totally flat, like it would be in a desktop application.

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

#7

You can do so in Firefox and Safari (Chrome also?)

你可以在火狐和Safari浏览器中这样做(Chrome也可以吗?)

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

#8

Workaround for WebKit:

WebKit的解决方案:

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

I found it in a CardFlip example.

我在一个CardFlip的例子中找到的。

#9

I like the hybrid CSS + jQuery solution.

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

To make all elements inside <div class="draggable"></div> unselectable, use this CSS:

要使

中的所有元素不可选，请使用以下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;  }

And then, if you're using jQuery, add this inside a $(document).ready() block:

然后，如果您正在使用jQuery，请在$(document).ready()块中添加这个:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

I figure you still want any input elements to be interactable, hence the :not() pseudo-selector. You could use '*' instead if you don't care.

我认为您仍然希望任何输入元素是可交互的，因此需要:not()伪选择器。如果你不介意，你可以用“*”代替。

Caveat: IE9 may not need this extra jQuery piece, so you may want to add a version check in there.

注意:IE9可能不需要这个额外的jQuery部件，所以您可能需要在其中添加一个版本检查。

#10

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

但这不是最好的方法。

#11

For Internet Explorer in addition, you need to add pseudo class focus (.ClassName:focus) and outline-style:none.

另外，对于Internet Explorer，您需要添加pseudo类焦点(. 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;/*IE*/}

#12

Working

工作

CSS:

CSS:

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

This should be working, but it won't work for the old browsers. There is a browser compatibility issue.

这应该是可行的，但是对于旧的浏览器来说就行不通了。存在浏览器兼容性问题。

#13

For those who have trouble achieving the same in the Android browser with the touch event, use:

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

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

#15

If you are using Less and Bootstrap you could write:

如果您正在使用较少和引导，您可以这样写:

.user-select(none);

#16

Aside from the Mozilla-only property, no, there is no way to disable text selection with just standard CSS (as of now).

除了纯mozilla属性之外，没有任何方法可以仅使用标准的CSS来禁用文本选择(到目前为止)。

If you notice, Stack Overflow doesn't disable text selection for their navigation buttons, and I would recommend against doing so in most cases, since it modifies normal selection behavior and makes it conflict with a user's expectations.

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

#17

This works in some browsers:

这在一些浏览器中是有效的:

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

Simply add your desired elements/ids in front of the selectors separated by commas without spaces, like so:

简单地在选择符前面添加您想要的元素/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;}

The other answers are better; this should probably be seen as a last resort/catchall.

其他的答案更好;这可能会被视为最后的手段。

#18

Suppose there are two div like this

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

Set cursor to default so that it will give a unselectable feel to user/

将光标设置为默认值，这样用户/将获得不可选的感觉

Prefix need to be use to support it in all browsers without prefix this may not work in all the answers.

需要使用前缀在所有浏览器中支持它，而不使用前缀。

#19

NOTE:

注意:

The correct answer is correct in that it prevents you from being able to select the text. However, it does not prevent you from being able to copy the text, as I'll show with the next couple of screenshots (as of 7th Nov 2014).

正确的答案是正确的，因为它阻止你选择文本。但是，这并不妨碍您复制文本，我将在接下来的几张截图中显示(从2014年11月7日开始)。

As you can see, we were unable to select the numbers, but we were able to copy them.

正如您所看到的，我们无法选择这些数字，但是我们能够复制它们。

Tested on: Ubuntu, Google Chrome 38.0.2125.111.

测试:Ubuntu，谷歌Chrome 38.0.2125.111。

#20

Add this to the first div in which you want to disable the selection for text:

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

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

#21

This will be useful if color selection is also not needed:

如果不需要颜色选择，这将是有用的:

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

...all other browser fixes. It will work in Internet Explorer 9 or later.

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

#22

To get the result I needed I found I had to use both ::selection and 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; }

#23

You can use CSS or JavaScript for that, JavaScript way is supported in Older browsers like Old IEs as well, but if it's not your case, use the CSS way then:

你可以使用CSS或JavaScript, JavaScript方式在老的浏览器中也有支持，但如果不是你的情况，使用CSS方法:

HTML/JavaScript:

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:

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>

#24

This is not CSS, but it is worth a mention:

这不是CSS，但值得一提:

jQuery UI Disable Selection:

jQuery UI禁用选择:

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

#25

Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved.

虽然这个伪元素在CSS选择器第3级的草稿中，但是在候选推荐阶段被删除了，因为它的行为似乎没有被指定，特别是在嵌套元素中，而且互操作性没有实现。

It's being discussed in How ::selection works on nested elements.

在如何::选择在嵌套元素上工作的讨论中。

Despite it is being implemented in browser, you can make an illusion of text not being selected by using the same color and background color on selection as of the tab design (in your case).

尽管在浏览器中实现了它，但您可以通过使用与选项卡设计相同的颜色和背景颜色(在您的例子中)选择不被选中的文本。

Normal CSS Design

p { color: white;  background: black; }

On selection

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

Disallowing users to select the text will raise usability issues.

不允许用户选择文本会引起可用性问题。

#26

Check my solution without JavaScript:

检查我的解决方案没有JavaScript:

jsFiddle

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>

Popup menu with my technique applied: http://jsfiddle.net/y4Lac/2/

使用我的技术弹出菜单:http://jsfiddle.net/y4Lac/2/

#27

I have learned from CSS-Tricks website.

我从CSS-Tricks网站上学到。

user-select: none;

And this also:

这也:

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

#28

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

#29

Try to use this one:

试着用这个:

::selection {    background: transparent;}

And if you wish to specify not select inside a specific element, just put the element class or id before the selection rule, such as:

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

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

#30

This highlighting effect is due to the action called hover(onMouseHover).When you will hover on any tab it's color will be changed.Just say for example.

这种突出显示效果是由于名为hover(onMouseHover)的动作。当你将鼠标悬停在任何标签上时，它的颜色就会改变。只是说。

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

You can give any color if you wanted to get it highlighted, else yo u can give none.

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