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

You are here: Reference > HTML > attributes > unSelectable

unSelectable attribute

Browser support:

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

If the unSelectable attribute 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 -moz-user-select and -webkit-user-select style properties for similar functionality.

The difference between the unSelectable attribute and the -moz-user-select and -webkit-user-select style properties is that the -moz-user-select and -webkit-user-select style properties specify whether an element can be selected while the unSelectable attribute only specifies whether the selection process can start in an element's content or not. Another difference is that the unSelectable attribute is not inherited while the -moz-user-select and -webkit-user-select style properties are inherited. It means that the unSelectable attribute must be set on all non-selectable elements regardless of whether the unSelectable attribute 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.

JavaScript page for this attribute: unselectable. You can find other example(s) there.

Possible values:

String that sets 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>