Disable text selection with CSS

Cross browser CSS to correctly disable user selection of elements.

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Although you should not need to interfere with normal selection behavior or conflict with a user's expectations when it comes to text selection, there are a few scenarios in which this property. For example:

• Navigation buttons in which you do not want the user to accidentally select the text of the button instead of clicking it. (Some browsers e.g. Safari actually let you select the text of normal buttons).
• This may be necessary for embedded devices. i.e. a device where a browser is used for rendering the UI.
• There are also legal issues where 3rd party content is being legally republished but a clause in the license requires web publishers to prevent text from being easily copied and pasted.

A JavaScript option should be avoided due to the inconsistencies of browsers.