How to disable text selection highlighting

by

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.

Leave a Comment