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>
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>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content