How to disable text selection using CSS
Last updated on
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!
More CSS Guides
Written by
Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.