Stop People Copying Your Content with only HTML & CSS

Stopping people from copying content from your website isn’t the best idea. But, people do opt to do it. Usually, people will go for the simple approach of using Javascript. But I’m going to tell you of a new way I recently came across.

There are multiple CSS extensions and CSS directives which disabled the user selection of text on an element. Further, you can actually even disable the mouse right-click with an attribute.

Copy and paste mac

So, how do we do this? Firstly, adding an attribute to a page element, seen below will disable the right-click.

oncontextmenu="return false" 

Or if you’re looking to remove right-click on the whole body:

<body oncontextmenu="return false">

The directive in CSS of user-select: none; will disable any highlight and copying on the page or element. It’s supported in modern browsers, with the exception of Safari on iOS and Mac OSX.

Here’s an example with all prefixes. But of course you wont need this if you’re using a compiler.

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

Prefixes listed against browser usage:

iOS Safari-webkit-touch-callout: none;
Chrome/Safari/Opera-webkit-user-select: none;
Konqueror-khtml-user-select: none;
Firefox-moz-user-select: none;
Internet Explorer/Edge-ms-user-select: none;

We wouldn’t ever recommend using this setting in a live or production website as it’s very unfriendly for any user using your site. But, it’s an interesting feature that a few years ago would have only been achievable via Javascript.

Start Your eCommmerce Growth.

Start your journey to a better digital strategy. Our certified team are happy to talk and answer any questions you might have around eCommerce, whether Development or Marketing.

01782 499530

Copyright © 2023 Aware Digital

Company Reg: 11640896 VAT No. 311736919

Privacy Policy