How to disable text selection using user-select property in CSS

This property controls selection of text and other elements on a page, except text fields of form, their contents can be selected whether it's allowed or not by user-select CSS property.
Operating user-select CSS property is very convenient in situations when you want to provide a user-friendly way to copy-paste the text. It helps to avoid accidental selection of useless things like icons, images (which can be a part of website design) or information text on a website (navigation, rating, or other user info).
At the moment of writing this article user-select CSS property is not a part of any W3C CSS specification.
To simply forbid users to select text of an element, use the following CSS styles with vendor prefixes:
.no-selection { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
As can be seen above, text of all elements with the class "no-selection" will be unselectable.
Let's check it out with the following HTML code:
<p>This text can be selected!</p> <p class="no-selection">This text cannot be selected!</p>
Browser support
Browser | Chrome | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
Version | 6 | 2 | 10 | 15 | 3.1 |
Vendor prefix | -webkit- | -moz- | -ms- | -webkit- | -webkit- |
CSS syntax
(-prefix-)user-select: none|text|all;
none
- text of an element and sub-elements cannot be selected.text
- text can be selected.-moz-none
- text inside an element cannot be selected, but selection for sub-elements can be allowed by using:-moz-user-select: text
.all
- double-clicking an element selects all the text inside the parent element.