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

You are here: Reference > CSS > properties > browser specific extensions > -moz-user-select

-moz-user-select property | -webkit-user-select property

Browser support:

-moz-user-select:

-webkit-user-select:

Specifies whether the text of the element can be selected.

This property is the same as the user-select property in the CSS3 declaration.

In Internet Explorer and Opera, use the unSelectable attribute for similar functionality.
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.
For further details, please see the unSelectable attribute and the onselectstart event.

JavaScript page for this property: MozUserSelect | webkitUserSelect. You can find other example(s) there.

Possible values:

One of the following values:

-moz-all

The element's contents can only be selected as a whole.

-moz-none

None of the element's contents can be selected.

all

The element's contents can only be selected as a whole.

element

One element at a time may be selected.

elements

One or more elements at a time may be selected.

inherit

Takes the value of this property from the computed style of the parent element.

none

None of the element's contents can be selected.

text

Default. Only the element's text content may be selected.

toggle

The element's contents may be selected.

Default: text.

Example HTML code 1:

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

<head>
    <style>
        .unselectable {
            -moz-user-select: none;
            -webkit-user-select: none;
        }
    </style>
</head>
<body>
    <div class="unselectable">The user is not able to select this text in Firefox, Google Chrome and Safari.</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

A cross-browser solution for the previous example:

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