To turn off text copy in CSS, you use the user-select property.
The primary method to disable text selection and copying using CSS is by applying the user-select: none; directive. This property prevents users from highlighting text within the element it's applied to, effectively disabling the ability to copy that text.
Using the user-select: none; Property
The CSS user-select property controls whether a user can select text. Setting it to none means the user cannot select the text.
.no-copy {
user-select: none; /* Standard syntax */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10+ */
}Applying this class to an HTML element will make the text inside it unselectable.
<p class="no-copy">This text cannot be copied.</p>What user-select: none; Does
According to the provided reference, the directive in CSS of user-select: none; will disable any highlight and copying on the page or element.
Browser Support
The user-select: none; property is widely supported in modern browsers. However, it's important to note the exceptions mentioned in the reference: it is not supported in Safari on iOS and Mac OSX. For broader compatibility across different browser engines (though less critical now than in the past), you might still see vendor prefixes used, like -webkit-user-select: none;.
Here's a summary of the effect:
| Property | Value | Effect |
|---|---|---|
user-select |
none |
Disables text selection and copying |
When to Use (and Not Use) user-select: none;
Disabling text copying should be used judiciously. It can be useful for:
- Preventing selection on UI elements that look like text but aren't meant to be copied (e.g., custom button text or decorative elements).
- In certain interactive applications or games where text selection could interfere with the user experience.
However, disabling text copying can frustrate users who expect standard browser behavior and might impede accessibility. It doesn't truly secure your content, as users can still view the source code or use developer tools to access the text.
Applying user-select: none; to large portions of your content is generally discouraged as it hinders legitimate use cases like quoting or referencing information.
