Martin Suchan – BloQ Just another WordPress site

18Feb/116

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 :-P

Tagged as: , Leave a comment
  • Ian

    I can definately select that sentence in IE9… curse you IE

    • http://www.facebook.com/tanim.kabir Tanim Kabir
  • http://www.facebook.com/tanim.kabir Tanim Kabir
  • Chamika

    Yes, This is not working for IE 8 also :(

  • Amit Tomar

    unselectable=”on”
    this is working fine….. great

  • http://www.facebook.com/sulekp 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 :-)