How to make text on a web page unselectable? There are several possible approaches – using overlay transparent image in front of the text, using image with text instead of text, or using the following best practice:

There are currently two independent ways for preventing text selection: using CSS style user-select: none; and using attribute on target element unselectable="on". Unfortunately only subset of browsers supports the first one and another subset the second one. To be more precise the CSS style user-select: none; is currently not supported anywhere, but you can use these browser specific styles:
-webkit-user-select: none; – working in Chrome and Safari
-moz-user-select: none; – working in FireFox

On the other hand unselectable="on" is working in Internet Explorer 6+ and in Opera. There is actually one simple hiccup with this property – you need to use it on each sub element in you text to prevent the selection across elements, but I’m sure you’ll figure this out 🙂

Summing that up: using the style and the attribute at the same time on your text you can easily prevent selecting anything.

Example: you can’t select this sentence 😛