How to disable text selection highlighting (css)

Matthew C.

The Problem

You want to disable text selection for some text. How do you do this using CSS?

The Solution

You may have a p tag containing text that you want to make unselectable.

<p class="unselectable">
  Unselectable text.
</p>
Click to Copy

You can add a CSS class to it and use the user-select CSS property to disable text selection by setting its value to “none”:

.unselectable {
  -webkit-user-select: none; /* Safari */
  user-select: none;
}
Click to Copy

The user-select property requires a vendor prefix for the Safari browser.

You can also set the value to “all” so that all of the text is selected when a user clicks on the text. The browser compatibility of user-select can be seen in this table.