用户选择 | user-select (Basic User Interface) - CSS 中文开发手册
这是一个实验技术
在使用此产品之前，请仔细检查浏览器兼容性表。
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 |
用户选择 | user-select (Basic User Interface) - CSS 中文开发手册 - Break易站