-ms-user-select property

Article
2017-01-11

Specifies a keyword value that indicates where users are able to select text within an element.

This property is read/write.

Syntax

-ms-user-select: none | element | text

Property 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.

CSS information

Applies To	all elements except replaced elements
Media	interactive
Inherited	false
Initial Value	text

Standards information

There are no standards that apply here.

Remarks

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-user-select" as an alias for this property.

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. (You can view this example live on the IE Test Drive.)

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;
}

Share via