Home

How to Disable Text Highlighting in CSS

Printer-friendly versionPrinter-friendly versionSend to friendSend to friendPDF versionPDF version

You can protect text on a website from being cursor-highlighted and copied by using this simple CSS trick.

Most browsers will disable selecting of text by using this statement in your CSS configuration:


user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;

Listed in

User comments on this frequently asked question:

Submitted by BB (not verified) on September 15, 2011 - 00:19.

And what to do if my text doesn't highlight at all? When select text in Firefox there's no blue background as usual, why is that?

Submitted by Dave Huggins (not verified) on September 15, 2011 - 00:21.

This is probably because there's a background image on that element that contains text. Check your CSS styling. If there's a transparent .gif or .png that lies beneath text, it won't highlight in Firefox. In that case, just replace the image with plain CSS statement specifying background colour. Hope that helped.

Submitted by Max Kramer (not verified) on September 8, 2011 - 08:28.

How do I protect text from being copied by bots. Is that doable?

Submitted by Guest (not verified) on September 13, 2011 - 06:02.

It is not, unless you block scrapers per IP or put things in JavaScript scripts. JS can't be read by bots.

Submitted by IT Guy (not verified) on September 8, 2011 - 04:02.

This is extremely useful if you want to protect parts of your website from being manually copied, but this won't save you from bots and scrapers designed to steal content. Good tip, tho.