In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > unselectable

unselectable property

Browser support:

Sets or retrieves whether the selection process can start in an element's content.

If the unselectable property of an element is set to 'on', then the element is selectable only if the selection starts outside the contents of the element.

In Firefox, Google Chrome and Safari, use the MozUserSelect and webkitUserSelect style properties for similar functionality.

The difference between the unselectable property and the MozUserSelect and webkitUserSelect style properties is that the MozUserSelect and webkitUserSelect style properties specify whether an element can be selected while the unselectable property only specifies whether the selection process can start in an element's content or not. Another difference is that the unselectable property is not inherited while the MozUserSelect and webkitUserSelect style properties are inherited. It means that the unselectable property must be set on all non-selectable elements regardless of whether the unselectable property is set on the parent element of a non-selectable element or not. For further details, see Example 2, 3 and 4.

In Internet Explorer, Google Chrome and Safari, there is another possibility to make an element unselectable. If the onselectstart event is canceled, the selection process does not start. The onselectstart event bubbles up, so if the onselectstart event is canceled on an element, the selection does not start within the element and its descendant elements. See Example 5.

Syntax:

object.unselectable;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: unSelectable

Possible values:

String that sets or retrieves the state of selectability.

One of the following values:

off

Default. The selection process may start in the element's content.

The selection process cannot start in the element's content.

Default: off.

Example HTML code 1:

This example illustrates the use of the unSelectable attribute:

<div unselectable="on">
    This text can be selected in Firefox, Google Chrome and Safari.
    In Internet Explorer and Opera, it is selectable only if the selection starts outside.
</div>
<br /><br />
<div>This text is selectable.</div>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the unSelectable attribute and the -moz-user-select and -webkit-user-select style properties:

<head>
    <style>
        .unselectable {
            -moz-user-select:none;
            -webkit-user-select:none;
        }
    </style>
</head>
<body>
    <div unselectable="on" class="unselectable">
        This text cannot be selected in Firefox, Google Chrome and Safari.
        In Internet Explorer and Opera, it is selectable only if the selection starts outside.
    </div>
    <br /><br />
    <div>This text is selectable.</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

The -moz-user-select and -webkit-user-select style properties are inherited, the unSelectable attribute is not:

<head>
    <style>
        .unselectable {
            -moz-user-select:none;
            -webkit-user-select:none;
        }
    </style>
</head>
<body>
    <div unselectable="on" class="unselectable">
        This text cannot be selected in Firefox, Google Chrome and Safari.
        In Internet Explorer and Opera, it is selectable only if the selection starts outside.
        <br /><br /><br />
        <div>
            This text is selectable in Internet Explorer and Opera and it is not selectable in Firefox, Google Chrome and Safari.
        </div>
        <br /><br />
        This text cannot be selected in Firefox, Google Chrome and Safari.
        In Internet Explorer and Opera, it is selectable only if the selection starts outside.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

The conclusion of the previous example is that the unSelectable attribute must be used on all descendant elements to make an element unselectable:

<head>
    <style>
        .unselectable {
            -moz-user-select:none;
            -webkit-user-select:none;
        }
    </style>
</head>
<body>
    <div unselectable="on" class="unselectable">
        This text cannot be selected in Firefox, Google Chrome and Safari.
        In Internet Explorer and Opera, it is selectable only if the selection starts outside.
        <br /><br /><br />
        <div unselectable="on">
            This text cannot be selected in Firefox, Google Chrome and Safari.
            In Internet Explorer and Opera, it is selectable only if the selection starts outside.
        </div>
        <br /><br />
        This text cannot be selected in Firefox, Google Chrome and Safari.
        In Internet Explorer and Opera, it is selectable only if the selection starts outside.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 5:

This example is similar to the previous one, but it uses the onselectstart event to make an element unselectable in Internet Explorer:

<head>
    <style>
        .unselectable {
            -moz-user-select:none;
            -webkit-user-select:none;
        }
    </style>
</head>
<body>
    <div onselectstart="return false;" class="unselectable">
        This text cannot be selected in Firefox, Google Chrome and Safari.
        In Internet Explorer, it is selectable only if the selection starts outside.
        In Opera, it is selectable.
        <br /><br /><br />
        <div>
            This text cannot be selected in Firefox, Google Chrome and Safari.
            In Internet Explorer, it is selectable only if the selection starts outside.
            In Opera, it is selectable.
        </div>
        <br /><br />
        This text cannot be selected in Firefox, Google Chrome and Safari.
        In Internet Explorer, it is selectable only if the selection starts outside.
        In Opera, it is selectable.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 6:

This example uses the unSelectable property to change the selectable state of an element. For a cross-browser solution, please see the next example.

<head>
    <script type="text/javascript">
        function ToggleSelState () {
            var span = document.getElementById ("mySpan");

            if ('unselectable' in span) {
                span.unselectable = !span.unselectable;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <span id="mySpan" unselectable="on">Select this text.</span>
    <br />

    <button onclick="ToggleSelState ();">Change selectable state!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 7:

This example shows how to change the selectable state of an element in all commonly used browsers.

<head>
    <style>
        #mySpan {
            -moz-user-select:none;
            -webkit-user-select:none;
        }
    </style>
    <script type="text/javascript">
        function ToggleSelState () {
            var span = document.getElementById ("mySpan");

            if ('unselectable' in span) {       // Internet Explorer, Opera
                span.unselectable = !span.unselectable;
            } 
            else {
                if (window.getComputedStyle) {
                    var style = window.getComputedStyle (span, null);
                    if ('MozUserSelect' in style) { // Firefox
                        span.style.MozUserSelect = (style.MozUserSelect == "none") ? "text" : "none";
                    }
                    else {
                        if ('webkitUserSelect' in style) {      // Google Chrome and Safari
                            span.style.webkitUserSelect = (style.webkitUserSelect == "none") ? "text" : "none";
                        }
                        else {
                            alert ("Your browser doesn't support this example!");
                        }
                    }
                }
                else {
                    alert ("Your browser doesn't support this example!");
                }
            }
        }
    </script>
</head>
<body>
    <span id="mySpan" unselectable="on">Select this text.</span>
    <br /><br /><br />

    <button onclick="ToggleSelState ();">Change selectable state!</button>
</body>