This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The user-select CSS property controls whether the user can select text. This doesn't have any effect on content loaded as chrome, except in textboxes.
/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
/* Global values */
user-select: inherit;
user-select: initial;
user-select: unset;
/* Mozilla-specific values */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;
/* WebKit-specific values */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* Doesn't work in Safari; use only
"none" or "text", or else it will
allow typing in the <html> container */
/* Microsoft-specific values */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
Note: This property correlates to the JavaScript Selection object.
Note: Many browsers still require a prefix to use this property. Check the compatibility table below.
| Initial value | auto |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
none- The text of the element and its sub-elements is not selectable. Note that the
Selectionobject can contain these elements. Starting with Firefox 21,nonebehaves like-moz-none, so selection can be re-enabled on sub-elements using-moz-user-select: text. auto-
The computed value of auto is determined as follows:
- On the
::beforeand::afterpseudo elements, the computed value isnone - If the element is an editable element, the computed value is
contain - Otherwise, if the computed value of
user-selecton the parent of this element isall, the computed value isall - Otherwise, if the computed value of
user-selecton the parent of this element isnone, the computed value isnone - Otherwise, the computed value is
text
- On the
text- The text can be selected by the user.
-moz-none- The text of the element and sub-elements will appear as if they cannot be selected. Note that the
Selectionobject can contain these elements. Selection can be re-enabled on sub-elements using-moz-user-select: text. Starting with Firefox 21,nonebehaves like-moz-none. all- In an HTML editor, if a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
contain
element(IE-specific alias)- Enables selection to start within the element; however, the selection will be contained by the bounds of that element. Supported only in Internet Explorer.
Note: One of the differences between browser implementations is inheritance. In Firefox, -moz-user-select is not inherited by absolutely positioned elements, but in Safari and Chrome, -webkit-user-select is inherited by those elements.
Note: CSS UI 4 renames user-select: element to contain.
auto | text | none | contain | all
Example
HTML
<p>You should be able to select this text.</p> <p class="unselectable">Hey, you can't select this text!</p>
CSS
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Basic User Interface Module Level 4 The definition of 'user-select' in that specification. |
Working Draft | Initial definition. Also defines -webkit-user-select as a deprecated alias of user-select. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
| Basic support | Chrome
Full support
54
| Edge
Full support
12
| Firefox
Full support
Yes
| IE Full support 10 | Opera
Full support
15
| Safari
Full support
3.1
| WebView Android
Full support
54
| Chrome Android
Full support
54
| Edge Mobile
Full support
12
| Firefox Android
Full support
Yes
| Opera Android
Full support
14
| Safari iOS
Full support
3.2
| Samsung Internet Android
Full support
6.0
|
auto | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support 10 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support 12 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
all | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support 10 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support 12 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
none | Chrome Full support Yes | Edge Full support 12 | Firefox
Full support
21
| IE Full support 10 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support 12 | Firefox Android
Full support
21
| Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
text | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support 10 | Opera Full support Yes | Safari
Partial support
Partial
| WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support 12 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS
Partial support
Partial
| Samsung Internet Android Full support Yes |
contain | Chrome No support No | Edge
Full support
12
| Firefox No support No | IE
Full support
Yes
| Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Edge Mobile
Full support
12
| Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
Document Tags and Contributors
Tags:
Contributors to this page:
mfuji09,
walkermatt,
fscholz,
mfluehr,
vadim.cpp,
silverwind,
arronei,
erikadoyle,
jpmedley,
phistuck,
Sebastianz,
akshaygore06,
riffdr,
HTMLValidator,
cvrebert,
sjohnsonaz,
torbasow,
yisibl,
GaryGuo,
wbamberg,
Sheppy,
antoine9298,
dflanagan,
julienw,
louuis,
I_m_back_now,
TTO,
Intelligent-Design,
kscarfone,
Martii,
teoli,
Daniel Hug,
ethertank,
cpeterson,
Dholbert,
nicofrand,
kurt,
6quityxy25,
DBaron,
elisee,
ebidel,
Johnjbarton,
Jürgen Jeka,
Sys,
reivax,
MykMelez,
DukeSpukem,
Nickolay,
Sylware
Last updated by:
mfuji09,