CSS参考手册
基本用户界面 | Basic User Interface
用户选择 | user-select
这是一个实验技术
在使用此产品之前，请仔细检查浏览器兼容性表。
user-selectCSS属性控制用户是否可以选择文本。这对加载为chrome的内容没有任何影响，除了在文本框中。
/* 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;注意：此属性与JavaScript 选择对象相关联。
注意：许多浏览器仍然需要一个前缀来使用这个属性。检查下面的兼容性表。
初始值 |
auto |
|---|---|
适用元素 |
all elements |
是否是继承属性 |
no |
适用媒体 |
visual |
计算值 |
as specified |
Animation type |
discrete |
正规顺序 |
the unique non-ambiguous order defined by the formal grammar |
语法
none元素及其子元素的文本是不可选的。请注意，Selection对象可以包含这些元素。从Firefox 21开始，none其行为如此-moz-none，因此可以在使用的子元素上重新启用选择-moz-user-select: text。auto如果浏览器的默认属性允许，可以选择文本。text文本可以由用户选择。-moz-none元素和子元素的文本将显示为不能被选中。请注意，Selection对象可以包含这些元素。可以使用子元素重新启用选择-moz-user-select: text。从Firefox 21开始，none就像-moz-none。all在HTML编辑器中，如果在子元素中出现双击或上下文单击，则将选择具有此值的最高祖先。contain
element（特定于IE的别名）使选择在元素内开始; 然而，选择将被包含在该元素的范围内。仅在Internet Explorer中支持使用。
注：浏览器实现之间的区别之一是继承。在Firefox中，-moz-user-select不是由绝对定位的元素继承的，而是在Safari和Chrome中，-webkit-user-select是由这些元素继承的。
注意： CSS UI 4 重命名用户选择：要包含的元素。
auto | text | none | contain | all示例
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;
}结果
规范
Specification |
Status |
Comment |
|---|---|---|
CSS Basic User Interface Module Level 4The definition of 'user-select' in that specification. |
Working Draft |
Initial definition. Also defines -webkit-user-select as a deprecated alias of user-select. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support |
6.0-webkit- 54.0 |
(Yes)-ms-webkit |
(Yes)-moz1 |
10-ms |
15.0-webkit |
3.1-webkit |
element |
No support |
(Yes) |
No support |
(Yes) |
? |
No support |
contain |
No support3 |
? |
No support |
? |
No support3 |
No support |
Feature |
Android |
Android Webview |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
Chrome for Android |
|---|---|---|---|---|---|---|---|---|
Basic support |
2.1 |
54.0 |
(Yes)-ms-webkit |
? |
10-ms 11-webkit2 |
No support |
3.2(Yes) |
54.0 |
element |
? |
No support |
(Yes) |
? |
? |
? |
No support |
No support |
contain |
No support3 |
No support3 |
? |
No support |
? |
? |
No support |
No support3 |
基本用户界面 | Basic User Interface相关
层叠样式表（ Cascading Style Sheets ）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
加载中,请稍侯......