How to Make Text Unselectable Using CSS?

How to Make Text Unselectable Using CSS?

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • 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 */
}