How to prevent (or enable) text selection on your webpage using CSS

The -ms-user-select property is a new Cascading Style Sheets (CSS) property that enables web and app developers to control where users are able to select text within their webpages or Windows Store apps using JavaScript. This topic instructs you on how to implement the -ms-user-select property on your own webpage. (You implement the -ms-user-select property in a Windows Store app using JavaScript in exactly the same way.) It contains the following sections:

• Introduction
• Using -ms-user-select
• Example implementation
  • Normal selection
  • Turn off selection except in editable content
  • Turn off selection everywhere
  • Select blog post content only
  • Select comments only
  • Selection starts in blog post or comments but can extend
• Support in other browsers
• Related topics

Note  The user-select property is not currently part of any World Wide Web Consortium (W3C) CSS specification. It was originally proposed in the User Interface for CSS3 module, but this module has since been superseded by CSS3 Basic User Interface Module, which does not contain the user-select property. Other major browsers support their own prefixed versions of this property. There are minor differences between the three implementations, so be sure to test your application across browsers.

Introduction

The ability to select text on webpages is important in many user scenarios. Consider a typical news site. Most pages include a news article, the contents of which users might want to select because they want to share the content. However, the page likely also contains menus, ads, and links to other parts of the site that users probably don't need or want to select. With support for the new -ms-user-select CSS property in Internet Explorer 10, you can specify that text selection is allowed, for example, in the main body of the news article, but not allowed in the menus.

Using -ms-user-select

The -ms-user-select property has four possible values:

Returning to our news site scenario, you could, for instance, set -ms-user-select to "none" on the entire page, and then set -ms-user-select to "element" on the main article. Doing so makes only the article text selectable. People who want to select the contents of a news article probably don't want to select the footer elements just past the article. Therefore, setting -ms-user-select to "element" makes it easy for them to just select the contents of the article without having to worry about getting the cursor placement exactly correct. This is especially true for users navigating with touch.

You can turn off text selection within any page element by setting -ms-user-select to "none". The user won't be able to start a selection within the specified block of text. However, if the user started selecting text on a different area of the page, the selection can continue into any area of the page, including areas where -ms-user-select is set to "none".

Example implementation

The IE Test Drive has a hands-on demonstration of the -ms-user-select property at work. The demo presents a mockup of a blog post with several distinct areas of text content: the blog as a whole ("#blog"), which is comprised of the blog post ("#blogPost") and several comments (".comment"). Each area is, in turn, comprised of different kinds of text elements, including input and textarea elements and elements with their contenteditable property set to "true".

The popup menu on the left side of the page has several options for setting the -ms-user-select on page elements. Let's briefly walk through the options listed in the popup menu within the demo.

Normal selection

This option indicates that -ms-user-select hasn't been set on any elements on the page. Users are free to select text in any element they choose.

Turn off selection except in editable content

This option sets -ms-user-select for the blog as a whole to "none". That means that nothing can be selected, except text within editable regions, such as the "Name" and "Comment" fields.

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

Turn off selection everywhere

This option sets -ms-user-select to "none" for everything, this time including the user entry fields (input and textarea elements), and any other elements with contenteditable set to true. That means that nothing can be selected, including text within editable regions.

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

Select blog post content only

This option sets -ms-user-select to "element" for elements with an ID of "blogPost", while setting -ms-user-select to "none" for the blog as a whole. That means that only the blog post text can be selected.

#blogPost {
  -ms-user-select:element;
} 

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

Select comments only

This option sets -ms-user-select to "element" for any elements with a class of "comment", while setting -ms-user-select to "none" for the blog as a whole. That means that only the comment text can be selected.

.comment {
  -ms-user-select:element;
} 

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

Selection starts in blog post or comments but can extend

This option sets -ms-user-select to "text" for any elements with an ID of "blogPost" or a class of "comment", while setting -ms-user-select to "none" for the blog as a whole. That means that text selection can only start within the blog post or comments, but that it can extend outside either of those areas. However, text selection cannot start outside the blog post or comments.

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

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

Support in other browsers

As of this writing, both Mozilla and WebKit support their own prefixed versions of the user-select property. However, there are several differences in their implementations. For the latest info, see either of the following links:

• Mozilla Developer Network: user-select
• Safari Developer Library: -webkit-user-select

Related topics

IE Test Drive demo: User-Select

Internet Explorer 10 Samples and Tutorials