How to Disable Text Selection Using CSS

Learn how to disable text selection on your webpage using the CSS property user-select to create a more app-like experience.

By default, browsers allow users to select text on webpages using keyboard commands or the mouse. However, if you want to prevent text selection and make your webpage feel more like an application, you can utilize the user-select: none; CSS rule.

To ensure cross-browser compatibility, you should use browser prefixes. According to Can I Use, the following prefixes are required:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

To make the entire app interface unselectable, you can apply user-select: none; to the body element. Then, you can selectively enable text selection on specific elements by using:

user-select: text;

Tags: CSS, web development, user-select, text selection, browser compatibility