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

Check my solution without 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>

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

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

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

jQuery UI Disable Selection:

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

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.

Suppose there are two divs like this:

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

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

Prefix need to be used to support it in all browsers. Without a prefix this may not work in all the answers.

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:

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.

With SASS (SCSS syntax)

You can do this with a 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;
}

In an HTML tag:

<div class="no-selectable">TRY TO HIGHLIGHT</div>

Try it in this CodePen.

If you are using an autoprefixer you can remove other prefix.

If you are using Less and Bootstrap you could write:

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

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

WebKit的解决方法：

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

我在CardFlip示例中找到了它。

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

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

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

Internet Explorer的JavaScript解决方案是：

onselectstart="return false;"

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

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

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

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

没有兼容“标准”的简便方法。使用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.

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, Opera and Firefox */
}

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

请注意，这是非标准功能（即不是任何规范的一部分）。不能保证它在任何地方都能工作，并且浏览器的实现可能会有所不同，将来浏览器可能会放弃对此的支持。

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