How to Make Text Unselectable Using CSS?

How to Make Text Unselectable Using CSS?

  • CSS
  • 1 min read

You can use user-select property to make text unselectable using CSS. Below is an example:

user-select Property

The CSS property user-select determines if the user is able to pick text. Except for textarea, this has no bearing on content loaded as part of a browser's UI (its chrome).

Making Text Undselectable Using CSS

In the following CSS code, the unselectable class is defined to not allow the selection of text. Specify this class to any element containing text to prevent the selection.

.unselectable {
  -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 */