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 π
I can definately select that sentence in IE9… curse you IE
Yes, This is not working for IE 8 also π
unselectable=”on”
this is working fine….. great
Developer Tools -> Inspect Element -> remove “unselectable” and “style” attributes in element and show can go on π
But yes, BFU user doesnt know such magic π