Michael Gearon

How to disable text selection using CSS

Michael Gearon

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

Michael Gearon

Written by

Michael Gearon

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.