How to make text unselectable on HTML page

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 πŸ˜›

6 thoughts on “How to make text unselectable on HTML page

  1. Peter Ε ulek

    Developer Tools -> Inspect Element -> remove “unselectable” and “style” attributes in element and show can go on πŸ™‚
    But yes, BFU user doesnt know such magic πŸ™‚

Comments are closed.