Unselectable Text

2009.12.05 Read More html css javascript

Making text unselectable is useful for creating certain javascript UI widgets. This is a cross-browser method for preventing text selection using an unselectable="on" element attribute.

One approach to preventing text selection is using the CSS3 user-select property with a value of none. Firefox and Webkit support this feature through the proprietary -moz-user-select and -khtml-user-select properties respectively.

Internet Explorer supports an unselectable attribute on elements. When set to the value "on", text inside the element cannot be selected.

Since using the unselectable="on" attribute is unavoidable, adding this CSS style allows non-IE browsers to support the attribute as well:

[unselectable=on] { -moz-user-select: none; -khtml-user-select: none; user-select: none; }

For example, the text in this paragraph cannot be selected.