-ms-user-select

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 

The -ms-user-select CSS property is a Microsoft extension that specifies a keyword value that indicates where users are able to select text within an element.

Initial valuetext
Applies tonon-replaced elements
Inheritedno
Mediainteractive
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

none

Blocks selection from starting on that element. It will not block an existing selection from entering the element.

element

Enables selection to start within the element; however, the selection is contained by the bounds of that element.

text

Enables selection to start within the element and extend past the element's bounds.

Formal syntax

  none | element | text

Examples

The following examples apply to a typical blog layout, that has an overall container div with an ID of "blog", and an inside div with an ID of "blogPost" (for the individual blog post). The "comment" class is applied to comment div elements. The blog post contains an input element and a textarea element for the comment area.

The following code example turns off selection except in editable content.

#blog {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
}

The following code example turns off selection everywhere.

#blog, #blog input, #blog textarea, 
#blog *[contenteditable=true] { 
  -ms-user-select: none;  
  -webkit-user-select: none; 
  -moz-user-select: -moz-none;
}

The following code example enables users to select blog post content only.

#blogPost {
  -ms-user-select: element;
  -webkit-user-select:  text;
  -moz-user-select: text;
} 

#blog { 
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
}

The following code example enables users to select comments only.

.comment {
  -ms-user-select: element;
  -moz-user-select: text;
  -webkit-user-select: text;
} 

#blog{ 
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
}

The following code example enables the selection to start in a blog post or comments, but for it to extend past the starting element as well.

#blogPost, .comment { 
  -ms-user-select: text;
} 

#blog { 
  -ms-user-select: none;
}

Specifications

Not part of any specification.

Document Tags and Contributors

Contributors to this page: jameshkramer
Last updated by: jameshkramer,