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.

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:

Michael Gearon

Written by

Mike

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.