User selection

Here we show a div and two text boxes. The div is set to 'none', which disables selection of the text within it. Editable text--including text within edit boxes and text areas, doesn't automatically become unselectable when a parent element is set to '-ms-user-select:none'. You can see this in the first edit box. Even though the parent div is set to '-ms-user-select:none', the text in the first edit box is still selectable with no explicit -ms-user-select value set.

In most cases, it will be appropriate for editable text to be selectable; however, there might be cases where you want to disable selection even for editable text, such as when handling sensitive data like bank account numbers. In this case, you can set '-ms-user-select:none' on the input element as is the case for the second input box, where you can see the text is not selectable.

For syntax that is supported on other browsers, refer to the scenario2.css file.

Code

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

.notSelectable
{
    -ms-user-select: none;
}