Michael Gearon

How to disable text selection using CSS quickly

Michael Gearon ยท

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.

Looking at caniuse.com at time of writing this article you will need to use browser prefixes to support all major browsers: https://caniuse.com/#feat=user-select-none

-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;

Not very efficient code wise but it is a solution!

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a UX Designer at BrandContent. Specialising in voice assistants and CRO, I have a wealth of experience in UX, UI and website design. Based in Cardiff, South Wales Mike can help local businesses with their online presence.