Disable text selection with CSS

  Uncategorized

Yes, it is possible to disable the text selection with a simple line of CSS.

The user-select property is a new CSS3 property. Using user-select enables web and app developers to control the ability to select text. Most browsers (With CSS3 support), can do this by using variations on the CSS3 user-select property. The user-select property controls the actual Selection operation (Text and Images). This won’t have effect on the visible content, except in textboxes. The content of the element and all sub-elements will not be able to be selected.

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Selectable text.

Unselectable text.

For IE < 10 and Opera, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML. But this property isn't inherited to child elements, meaning you have to put the unselectable attribute in the start tag of every element inside the tag.

Text selection is disabled here.

At least there is a additional JavaScript solution for the IE.

Text selection is disabled via JavaScript in IE here.

Note:
Disable text selection with CSS is non-standard and is not on a standards track. Avoid using it on production sites facing the Web. It will not work for every user.

Links:
http://stackoverflow.com/
https://developer.mozilla.org/