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

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozUserSelect

MozUserSelect style property | webkitUserSelect style property

Browser support:

MozUserSelect

webkitUserSelect

Specifies or retrieves 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 property 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 property and the onselectstart event.

Syntax:

object.MozUserSelect;
object.webkitUserSelect;

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

MozUserSelect:	This property is read/write.
webkitUserSelect:	This property is read/write.

CSS page for this property: -moz-user-select

Possible values:

The type of this property is string.

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example uses the MozUserSelect and webkitUserSelect properties to change the selectable state of an element. For a cross-browser solution, please see the next example.

<head>
    <script type="text/javascript">
        function ChangeUserSelect (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var selectState = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");

            if ('MozUserSelect' in div.style) {
                div.style.MozUserSelect = selectState;
            } else if ('webkitUserSelect' in div.style) {
                div.style.webkitUserSelect = selectState;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv">
        Select this text or
        <button>this button</button>
        or <a>this anchor element</a>
        and <b>change</b> the state 
        of <i>MozUserSelect</i> with 
        the select field.
    </div>

    <select onchange="ChangeUserSelect (this);" size="9">
        <option selected="selected" />-moz-all
        <option />-moz-none
        <option />all
        <option />element
        <option />elements
        <option />inherit
        <option />none
        <option />text
        <option />toggle
    </select>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

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>