Making text unselectable

javascript html css cross-browser textselection
Jesse picture Jesse · Mar 6, 2011 · Viewed 7.7k times · Source

So, while playing with scrollbars and stuff in HTML5, I'm starting to notice an annoying trend. If I have text near my element that's being dragged (say, a scrub bar for a video, scroll bar, anything a user would click and drag), nearby text will get selected, as if I'm not using a control, just dragging over the page.

This is terribly annoying, and I can't seem to find the right string to search for on google to figure out if it's possible to make certain elements "unselectable".

Anyone know how to do this?

Answer

icktoofay picture icktoofay · Mar 6, 2011

It varies per browser. These CSS properties will target WebKit and Gecko-based browsers, as well as any future browsers that support user-select:

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

Related questions

Is there a way to make text unselectable on an HTML page?

I'm building an HTML UI with some text elements, such as tab names, which look bad when selected. Unfortunately, it's very easy for a user to double-click a tab name, which selects it by default in many browsers. I might …

Read More
Prevent zoom cross-browser

For a map-like tool, I would like to disable the browser zooming feature. (I know that this is generally a bad idea, but for some specific website, it is needed). I did it successfully by listening the keyboard shortcut CTRL + / …

Read More
If I'm already using Modernizr, will I then even need HTML5 Shiv?

1) If I'm already using Modernizr, will I then even need HTML5 Shiv to enable HTML5 tag support for IE? 2) Is HTML5 Shiv only for IE, or for all browser who don't have native HTML 5 support? Like older versions of Firefox, …

Read More