user-select - CSS: Cascading Style Sheets 编辑
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: 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.
Syntax
none- The text of the element and its sub-elements is not selectable. Note that the
Selectionobject can contain these elements. autoThe used value of
autois determined as follows:- On the
::beforeand::afterpseudo elements, the used value isnone - If the element is an editable element, the used value is
contain - Otherwise, if the used value of
user-selecton the parent of this element isall, the used value isall - Otherwise, if the used value of
user-selecton the parent of this element isnone, the used value isnone - Otherwise, the used value is
text
- On the
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)- Same as
contain. Supported only in Internet Explorer.
Note: CSS UI 4 renames user-select: element to contain.
Formal definition
| Initial value | auto |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
auto | text | none | contain | all
Examples
HTML
<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>
CSS
.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;
}
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
BCD tables only load in the browser
See also
::selectionpseudo-element- The JavaScript
Selectionobject
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论