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;
注意
:
user-select
is not an inherited property, though the initial
auto
value makes it behave like it is inherited most of the time. WebKit/Chromium-based browsers
do
implement the property as inherited, which violates the behavior described in the spec, and this will bring some issues. Until now, Chromium chooses to
fix the issues
, make the final behavior meets the specifications.
none
Selection
object can contain these elements.
auto
The used value of
auto
is determined as follows:
::before
and
::after
pseudo elements, the used value is
none
contain
user-select
on the parent of this element is
all
, the used value is
all
user-select
on the parent of this element is
none
, the used value is
none
text
text
The text can be selected by the user.
all
The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
contain
Enables selection to start within the element; however, the selection will be contained by the bounds of that element.
element
(IE-specific alias)
contain
. Supported only in Internet Explorer.
注意：
CSS UI 4
renames
user-select: element
to
contain
.
| 初始值 |
auto
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
auto | text | none | contain | all
<p>You should be able to select this text.</p> <p class="unselectable">Hey, you can't select this text!</p> <p class="all">Clicking once will select all of this text.</p>
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.all {
-moz-user-select: all;
-webkit-user-select: all;
-ms-user-select: all;
user-select: all;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Basic User Interface Module Level 4
The definition of 'user-select' in that specification. |
工作草案 |
Initial definition. Also defines
-webkit-user-select
as a deprecated alias of
user-select
.
|
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
user-select
|
Chrome 完整支持 54 |
Edge
完整支持
12
Prefixed
|
Firefox
完整支持
69
|
IE
完整支持
10
Prefixed
|
Opera
完整支持
15
Prefixed
|
Safari
完整支持
3
Prefixed
|
WebView Android 完整支持 54 | Chrome Android 完整支持 54 |
Firefox Android
完整支持
49
Prefixed
|
Opera Android
完整支持
14
Prefixed
|
Safari iOS
完整支持
3
Prefixed
|
Samsung Internet Android 完整支持 6.0 |
all
|
Chrome 完整支持 53 | Edge 完整支持 79 | Firefox 完整支持 1 | IE 不支持 No | Opera 完整支持 40 | Safari 不支持 No | WebView Android 完整支持 53 | Chrome Android 完整支持 53 | Firefox Android 完整支持 4 | Opera Android 完整支持 41 | Safari iOS 不支持 No | Samsung Internet Android 完整支持 6.0 |
auto
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 10 | Opera 完整支持 15 | Safari 完整支持 2 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 | Safari iOS 完整支持 3 | Samsung Internet Android 完整支持 1.0 |
contain
|
Chrome 不支持 No |
Edge
不支持
12 — 79
Alternate Name
|
Firefox 不支持 No |
IE
完整支持
10
Alternate Name
|
Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
none
|
Chrome 完整支持 1 | Edge 完整支持 12 |
Firefox
完整支持
21
|
IE 完整支持 10 | Opera 完整支持 15 | Safari 完整支持 2 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 |
Firefox Android
完整支持
21
|
Opera Android 完整支持 14 | Safari iOS 完整支持 3 | Samsung Internet Android 完整支持 1.0 |
text
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 10 | Opera 完整支持 15 |
Safari
部分支持
2
注意事项
|
WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 |
Safari iOS
部分支持
3
注意事项
|
Samsung Internet Android 完整支持 1.0 |
完整支持
部分支持
不支持
见实现注意事项。
用户必须明确启用此特征。
使用非标名称。
要求使用供应商前缀或不同名称。
::selection
pseudo-element
Selection
object