用户选择 | user-select

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