How to disable text selection highlighting

cross-browser, css, highlight, textselection

Solution

UPDATE January, 2017:

According to Can I use, the `user-select` + `-webkit-user-select` for Safari is enough to achieve desired behavior in all major browsers.

These are all of the available correct CSS variations:

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

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

Note that `user-select` is in standardization process (currently in a W3C working draft). It is not guaranteed to work everywhere and there might be differences in implementation among browsers. Also, browsers can drop support for it in the future.

More information can be found in Mozilla Developer Network documentation.

The values of this attribute are `none`, `text`, `toggle`, `element`, `elements`, `all` and `inherit`.

Problem

For anchors that act like buttons (for example, the buttons on the sidebar of this Stack Overflow page titled Questions, Tags, and Users) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text? I realize that this could be done with JavaScript and a little googling yielded the Mozilla-only `-moz-user-select` option. Is there a standard-compliant way to accomplish this with CSS, and if not, what is the "best practice" approach?

Original source

Related problems