How to Disable Text Selection With CSS

Learn how to disable text selection by using the user-select CSS property.

By default, web browsers allow you to select text on any given website — as long as it’s a real text element and not an image with text on it.

You can select text either by using your mouse, or your keyboard, e.g. cmd + a (Mac), or ctrl + a (Windows).

But what if you don’t want to allow text selection (for whatever reason)?

You use the CSS property user-select and give it a value of none:

selector {
  user-select: "none";
}

So let’s say you want to disable text selection on a every element that has a class called .select-none:

.select-none {
  user-select: "none";
}

And then you add that class to any element that you want to disable text selection on:

<p class="select-none">This text cannot be selected.</p>

Demo:

This text element cannot be selected, try yourself!

Note: you need to use these browser prefixes for the user-select property to make it work in all browsers:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;