微信小程序版本更新提示

user-select

CSS 属性 user-select 控制用户能否选中文本。除了文本框内，它对被载入为 chrome 的内容没有影响。

用途

页面中点击两下会导致内容选中，可以通过这个属性进行限制

语法

none

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

text

用户可以选择文本。

all

在一个 HTML 编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。

contain

允许在元素内选择；但是，选区将被限制在该元素的边界之内

auto(默认值)

auto 的具体取值取决于一系列条件，具体如下：

1. 在 ::before 和 ::after 伪元素上，采用的属性值是 none
2. 如果元素是可编辑元素，则采用的属性值是 contain
3. 否则，如果此元素的父元素的 user-select 采用的属性值为 all，则该元素采用的属性值也为 all
4. 否则，如果此元素的父元素的 user-select 采用的属性值为 none，则该元素采用的属性值也为 none
5. 否则，采用的属性值为 text

示例

HTML

<p>你应该可以自由选中这段文本中的一段（我是默认值）。</p>
<p class="unselectable">嘿嘿，你不能选中这段文本！</p>
<p class="all">点击一次就会选中这段文本。</p>

CSS

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

.all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}