How to Disable Text Selection using CSS

In this article, you will learn to disable text selection using CSS with the help of examples.

As we know, browsers let us select the text from any webpage using a mouse cursor or shortcut key.

But there are some cases where we want to prevent users from selecting or highlighting text on our web pages. For example, if you want your webpage to feel like an app rather than a document then you can opt this option.

To control whether a user can select text or not, we can use the user-select: none; CSS property.

Most modern browsers support user-select: none;, However, there are still some browsers or their old versions where we need to use browser-specific prefixes before the user-select. For example,

div {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

You can also use the given below CSS properties which also support most browsers and their versions.

div {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

Note: Visit Support for user-select to learn more.

You can apply the user-select: none; on the body tag of the HTML document or you can also use the universal selector *. For example,

Using the body element selector

body {
  user-select: none;
}

Using universal selector

* {
  user-select: none;
}

If you only want to disable user selection of a specific HTML element then you directly apply the user-select: none; property on that element. For example,

p {
   user-select: none;
}

Here we are preventing all paragraphs of the webpage from the user selection.

If you disabled the user selection for the whole webpage and want to enable it for some specific element then you can use the user-select: text; property on that element. For example,

body {
  user-select: none;
}

p {
   user-select: text;
}

Here we disabled the user selection for the whole webpage except the paragraphs.