Home / Articles / Programming languages / Markup languages / HTML & CSS / How to disable text selection using user-select property in CSS

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

How to disable text selection using user-select property in CSS
 
How to disable text selection using user-select property in CSS
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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

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.

 

Read also

Formatting text in HTML

Formatting text in HTML

Font size in HTML

Font size in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation