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:
First published on
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects
