How to disable text selection using CSS

Mike

Last updated on July 2, 2021

Perhaps a controversial idea but you can disable the ability for the user to select text in the browser by using the CSS user-select property. However it can be useful to disable this feature especially if you want your web page to act similarly to an app rather than a document.

To do this you must use the user-select: none; CSS rule.

The browser support for this declaration is good with browser prefixing still needed. Latest versions of Firefox, Edge and Chrome no longer need the prefix, whilst Safari and Internet Explorer need the prefix.

Code

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

If you wanted to apply this to the whole document then you can apply the styling to the body element and then if you want to re-enable it for certain elements you can then use the:

user-select: none;

 

More CSS guides

Now that you know more about disabling text selection in CSS, here are a few more guides to read:

• CSS background-clip text
• CSS flexbox guide
• CSS Borders

First published on February 18, 2020