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>

Live demo

Browser support

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.