How to disable text selection using CSS quickly
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!
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.