[轉][CSS] user-select

轉自 https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select

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由这些元素继承。

Note: CSS UI 4 renames user-select: element to contain.

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

	Desktop	Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Basic support Experimental	Full support54打开	Full support12 Prefixed 打开	Full supportYes Prefixed 打开	Full support10	Full support15 Prefixed 打开	Full support3.1 Prefixed 打开	Full support54打开	Full support54打开	Full support12 Prefixed 打开	Full supportYes Prefixed 打开	Full support14 Prefixed 打开	Full support3.2 Prefixed 打开	Full support6.0 Prefixed 打开
`auto` Experimental	Full supportYes	Full support12	Full supportYes	Full support10	Full supportYes	Full supportYes	Full supportYes	Full supportYes	Full support12	Full supportYes	Full supportYes	Full supportYes	Full supportYes
`all` Experimental	Full supportYes	Full support12	Full supportYes	Full support10	Full supportYes	Full supportYes	Full supportYes	Full supportYes	Full support12	Full supportYes	Full supportYes	Full supportYes	Full supportYes
`none` Experimental	Full supportYes	Full support12	Full support21打开	Full support10	Full supportYes	Full supportYes	Full supportYes	Full supportYes	Full support12	Full support21打开	Full supportYes	Full supportYes	Full supportYes
`text` Experimental	Full supportYes	Full support12	Full supportYes	Full support10	Full supportYes	Partial supportPartial Notes 打开	Full supportYes	Full supportYes	Full support12	Full supportYes	Full supportYes	Partial supportPartial Notes 打开	Full supportYes
`contain` Experimental	No supportNo	Full support12打开	No supportNo	Full supportYes打开	No supportNo	No supportNo	No supportNo	No supportNo	Full support12打开	No supportNo	No supportNo	No supportNo	No supportNo

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.

文档标签和贡献者

标签：

此页面的贡献者： xgqfrms, yipanhuasheng, wbamberg, xlaoyu, SamuraiMe, Sheppy, teoli, MrFish

最后编辑者: xgqfrms, Jan 22, 2019, 7:22:38 PM

dizzy03

碎碎念

dizzy03 發表在痞客邦留言(0) 人氣(0)

碎碎念

murmur