How to disable text and image selection (HTML)
If you want to allow selection of elements that contain text, images, and other non-proprietary content, you can override the default behavior by using a Cascading Style Sheets (CSS) property: -ms-user-select.
The -ms-user-select property supports the following values:
Selection is possible within the element (and all child elements). However, the selection is constrained to the bounds of the element.
Selection is possible within the element and is not constrained to the bounds of the element.
Note Setting this property is required to share content and copy and paste from the clipboard.
- For information on using WinJS objects and controls, see Quickstart: Adding WinJS controls and styles.
To override this behavior and enable selection even if click, MSGestureTap, or mouseup handlers are present, you must apply the touch-select CSS property to the object and assign the property a value of grippers.
Selection is canceled if you call preventDefault from any of the following event handlers:
In some cases, you might like to specifically disable selection for all UI elements within your app.
This example excludes all UI elements from selection by applying -ms-user-select, with a property value of
none, to the
<html> element and all editable child elements.
Note We recommend that you also set the value of the
cursor property to
default to ensure consistent UI feedback across all elements.
If you've shut down selection globally across your app, but would like to override this setting for the content of a particular UI element, just apply the -ms-user-select attribute to that element and set the attribute value to
element. This constrains selection to the bounds of the element.
This example allows selection for the content of an element with the specified ID (including the content of child elements).
Note We recommend that you also explicitly set the value of the
cursor property to
text to differentiate UI feedback for this element.
- Guidelines for selecting text and images
- Unselectable content areas with -ms-user-select CSS attribute sample