3

I know that we can use javascript to achieve this but disabling the javascript in the web browser, user can easily copy text. Is there any way for this using CSS?

Madara's Ghost
  • 158,961
  • 49
  • 244
  • 292
Prashanth Palaniswamy
  • 314
  • 1
  • 3
  • 15
  • 4
    This has been tried so many times before. If they can see it as text, they can get to it. End of story. The best way I've seen to do this is to convert the text to an image. Otherwise there's no realistic way to do it. You could also search for other questions on this topic. There are plenty of them. – Joseph Marikle Jun 07 '12 at 10:52
  • 22
    Crossbrowser method: Don't write any text. – Joonas Jun 07 '12 at 10:52
  • 1
    Every 'answer' that involves CSS or JS is NOT gonna work! I can easily switch off JS and CSS and still get the text. – markus Jun 07 '12 at 11:08
  • 1
    @JosephMarikle That won't stop someone from applying OCR, or even just retyping it out by hand. – GordonM Jun 07 '12 at 13:59
  • @markus-tharkun The OP didn't ask for a foolproof method of preventing user from selecting and copying text, they just asked for a CSS method, so the answers that give that method, work. Granted it is a good idea to point out that it can easily be circumvented. – NominSim Jun 07 '12 at 14:17
  • @NominSim: How can I add 2 numbers with jQuery? Will you give a jQuery answer on that too? – Madara's Ghost Jun 07 '12 at 14:20
  • Thanks for all your responses i got what i wanted, my client actually wanted this sort of CSS based solution only – Prashanth Palaniswamy Jun 11 '12 at 20:05
  • 2
    @MadaraUchiha `alert ($('' + (2+2) + '').text ());` – GordonM Oct 22 '12 at 08:37

8 Answers8

33

If you don't want someone copying your text, don't place it on the web.

The web's source is visible, free to read, and to copy.

Even with all the CSS, JavaScript or imagary tricks you may pull off, nothing will prevent a user from manually reading and copying your text to a different document/location.

The best you can probably hope to do is to annoy people enough to discourage them from copying your text. But like all other things, someone persistent would be able to pull it off.

That's what us humans do.

Madara's Ghost
  • 158,961
  • 49
  • 244
  • 292
12
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Rickzin Pema
  • 316
  • 1
  • 3
  • And if I turn CSS off or use curl I can still get the text anyway. – GordonM Jun 07 '12 at 14:01
  • 3
    @GordonM This still answers the question, the OP asked specifically for a CSS solution, as others have pointed out there is no across-the-board solution. – NominSim Jun 07 '12 at 14:13
  • 6
    A CSS "solution" isn't possible ... there is no "solution" ... not to mention this type of thing shouldn't be encouraged. It's web-design circa 1995. The web is inherently public, and there's nothing CSS can do about it. – rdlowrey Jun 07 '12 at 14:20
  • @NominSim as it's so utterly trivial to circumvent it, it's no solution at all. – GordonM Jun 07 '12 at 16:28
  • 2
    @CSSGuy You should have protected it with CSS then :) – GordonM Jun 07 '12 at 16:29
  • 2
    @GordonM whether it is trivial or not, it answers the OP question entirely, unlike your answer which doesn't address what the OP wants. – NominSim Jun 07 '12 at 16:31
  • 4
    @NominSim What the OP wants the OP can't have. That's the point. – GordonM Jun 07 '12 at 17:08
  • 2
    @GordonM Seems to me that this is exactly what the OP wanted, evidenced by the OP accepting it as the answer to their question. – NominSim Jun 07 '12 at 17:27
  • @NominSim Oh good, I guess the "has to work" criteria for a good answer no longer applies then – GordonM Jun 07 '12 at 17:28
  • 1
    @GordonM "Is there any way for this using CSS?" Yes there is; the answer given here. The OP wasn't looking for a foolproof method of preventing the user from selecting and copying text, but for a CSS method, which is given. What is your issue? – NominSim Jun 07 '12 at 17:31
  • @NominSim My issue is that IT DOESN'T WORK! Worse, it's annoying as hell. – GordonM Jun 07 '12 at 17:34
  • 2
    @GordonM The OP asked for ways to prevent the user from copying and selecting text from their webpage **using CSS**. The answer does that. Period. Just because this isn't the best way to do things doesn't mean the answer is wrong. It 100% answers the OP's question. – NominSim Jun 07 '12 at 17:38
  • A solution that doesn't work is no solution at all, regardless of whether or not it's what was wanted. It's worse than useless in fact, because it does nothing but to install a false sense of security and annoy users who might want to select text for legitimate reasons, such as making it more readable against a background with which it's clashing. – GordonM Jun 07 '12 at 17:44
  • 2
    Thanks for all your responses i got what i wanted, my client actually wanted this sort of CSS based solution only – Prashanth Palaniswamy Jun 11 '12 at 20:05
  • 1
    Upvoted, because some people just want to prevent clicks from selecting text, nothing to do with security or copyright - it's UX thing. If I use a webapp and click on something which is not desirable to be copied (i.e. text in buttons) and text gets selected it makes things look bad. This solves that problem. – Matt Fellows Jun 14 '19 at 14:21
8

There's no way to stop someone sufficiently determined from copying the text of your website. Even if there was some hypothetical perfect way of blocking copying and pasting or downloading the pages to only be viewed and not saved (which there isn't), someone with enough time and motivation can just type out the text by hand if they really wanted it.

The web is designed to be open. And a good thing that it is too. Extracting the data from a web page authored in 1991 isn't particularly difficult. Try doing the same thing with a Microsoft Word document from the same era without using a Microsoft product.

GordonM
  • 29,211
  • 15
  • 77
  • 126
5

Similar question here with some good answers so I won't cover old ground

Whatever you do, the user is still going to be able to view the source of the page and copy anything from there. The only way to totally prevent it is not to display any text at all (e.g. display an image, or dynamically create an image which isn't great for accessibility)

Community
  • 1
  • 1
Macros
  • 7,041
  • 2
  • 33
  • 60
2

The web is open source, free to read, there is no way to warn people to copy content even with java script but you can warn via CSS. trick like below.

Try this...

p
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
CSS Guy
  • 1,944
  • 3
  • 18
  • 27
  • without java script any thing broken easily you can do via page source code easily but in this we just warn to user that please not copy if any one have little bit Coding knowledge coping content easily. – CSS Guy Jun 07 '12 at 11:05
  • 1
    Even with JavaScript. Nothing can prevent me from disabling CSS and JavaScript and copy your text, or go inspect the DOM and see what it says. Worst case, I can always manually read and copy by hand. That doesn't require any coding knowledge. – Madara's Ghost Jun 07 '12 at 11:08
  • 1
    @Truth The OP asked for a CSS solution, as you and others have pointed out there is no solution that will prevent, only "annoy", but this answers the OP's specific question about a CSS solution. – NominSim Jun 07 '12 at 14:15
  • 2
    @NominSim: Read about the [XY Problem](http://meta.stackexchange.com/q/66377/166899). The solution the OP asks about is not necessarily the correct one. – Madara's Ghost Jun 07 '12 at 14:17
  • @Truth As you point out, the best thing the OP can hope to do is to **annoy** people to discourage them. He can't do that with an answer that says "there are ways around everything so don't bother", he **can** do it with the answer he requests in CSS, which is given here. – NominSim Jun 07 '12 at 14:22
2
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

This is a good way to prevent user from selecting text. And this is not a bad answer. For instance, if you work on a website that uses Canvas (HTML5) and allows users to drag'n'drop stuff on this canvas; if the user is going out of canvas defined zone, text will start to get 'selected'. Which is ugly. So for obvious ergonomic reasons, this is a good way to go.

Leiko
  • 914
  • 8
  • 10
0

What your client, and many others, are looking for is not possible, because they don't understand how web pages are transmitted, but, these clients will probably be happy with making it "difficult" for a user to copy the text. There are other use-cases where text that could be marked as not copyable would be a useful feature, for example, you want to make it easy for a user to copy some text without copying something that makes no sense to copy, like metadata, for example a time stamp.

As far as the previous answers, they seem to indicate the way to do this with css is with the user-select css property, however, this keeps the text from appearing to be selected, but it will still copy to the clipboard. However, that is the best you will get with css alone and might dissuade some users from copying your content.

Javascript will take it one step further and make it difficult to copy from the browser window without using developer tools.

nomis
  • 1,402
  • 14
  • 13
0
-webkit-touch-callout: none; ;
-webkit-user-select: none;
-khtml-user-select: none; 
-moz-user-select: none;
-ms-user-select: none; 
user-select: none;

The text won't be selected but, We can copy the text in some cases.

Satya Pendem
  • 149
  • 3
  • 10