这是一个实验技术
在应用到生产环境前,认真检查 Browser compatibility table 。

user-select 是一个CSS属性,控制着用户能否选中文本。除了在文本框里,它在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;

Note: 这个属性与JavaScript中的 Selection 对象相关。

Note: 许多浏览器任然需要一个前缀才可以使用这个属性。检查下面的这个compatibility table 

Syntax

none
元素及其子元素的文本不可选中。 请注意这个Selection 对象可以包含这些元素。 从Firefox 21开始, none 表现的像 -moz-none,因此可以使用 -moz-user-select: text 在子元素上重新启用选择。
auto

auto的计算值确定如下:

  • 在 ::before 和 ::after 伪元素上,计算属性是 none
  • 如果元素是可编辑元素,则计算值是 contain
  • 否则,如果此元素的父元素的 user-select 的计算值为 all, 计算值则为 all
  • 否则,如果此元素的父级上的 user-select 的计算值为 none, 计算值则为 none
  • 否则,计算值则为 text
text
用户可以选择文本。
-moz-none
元素和子元素的文本将显示为无法选择它们。 请注意, Selection 对象可以包含这些元素。 可以使用 -moz-user-select: text. 在子元素上重新启用选择。 从Firefox 21开始,none 表现得像 -moz-none.
all
在一个HTML编辑器中,当双击子元素或者上下文时,那么包含该子元素的最顶层元素也会被选中。
contain
element (IE-specific alias)
允许选择在元素内开始; 但是,选择将包含在该元素的边界内。 仅在Internet Explorer中受支持。

Note: 在不同浏览器之间实现的一个区别是继承。 在Firefox中,-moz-user-select不会被绝对定位的元素继承,但在Safari和Chrome中,-webkit-user-select由这些元素继承。

auto | text | none | contain | all

Example

HTML

<p>你应该可以选中这段文本。</p>
<p class="unselectable">嗨,你不能选中这段文本!</p>

CSS

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Specifications

Specification Status Comment
CSS Basic User Interface Module Level 4
user-select
Working Draft 初始值。也可以定义 -webkit-user-select 作为一个不推荐使用的别名 user-select.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 54
Full support 54
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 3.1
Prefixed
Full support 3.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 54
Full support 54
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 54
Full support 54
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 14
Prefixed
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 3.2
Prefixed
Full support 3.2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 6.0
Prefixed
Full support 6.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
auto
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
all
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
none
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support 21
Full support 21
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 21
Full support 21
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
text
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Partial support Partial
Notes
Partial support Partial
Notes
Notes Allows typing in the <html> container.
WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support YesOpera Android Full support YesSafari iOS Partial support Partial
Notes
Partial support Partial
Notes
Notes Allows typing in the <html> container.
Samsung Internet Android Full support Yes
contain
Experimental
Chrome No support NoEdge Full support 12
Full support 12
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: element
Firefox No support NoIE Full support Yes
Full support Yes
Full support 10
Alternate Name
Alternate Name Uses the non-standard name: element
Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support 12
Full support 12
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: element
Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

文档标签和贡献者

此页面的贡献者: yipanhuasheng, wbamberg, xlaoyu, SamuraiMe, Sheppy, teoli, MrFish
最后编辑者: yipanhuasheng,