User selection

In this scenario, the parent div's user-select property is set to 'none', which disables the selection for the parent div. You can find five child divs that have their user-select property set to 'inherit', 'element', 'text', 'initial' and 'none', respectively.

The user has the ability to select everything within the div that has its user-select property set to 'element'. However, if you begin selection from the div marked 'text', you can select anything on the page. The 'inherit' div and the 'auto' div are not selectable just like the parent div.

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

Code

#parentDiv
{
    -ms-user-select: none;
}
#DivA
{
    border: 1px solid red;
    -ms-user-select: inherit; 
}
#DivB
{
    border: 1px solid blue;
    -ms-user-select: element;
}
#DivC
{
    border: 1px solid orange;
    -ms-user-select: text;
}
#DivD
{
    border: 1px solid green;
    -ms-user-select: auto;
}
#DivE
{
    border: 1px solid yellow;
    -ms-user-select: none;
}