user-select

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

user-select CSS 属性用于控制用户是否可以选择文本。这不会对作为浏览器用户界面(即 chrome)的一部分的内容加载产生任何影响,除非是在文本框中。

尝试一下

语法

css
/* 关键字值 */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/* 全局值 */
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: revert-layer;
user-select: unset;

备注: user-select 不是继承属性,即使默认的属性值 auto 的表现基本上以继承为主,似乎是继承属性。甚至,WebKit/基于 Chromium 的浏览器在实现此属性时将其作为继承属性,但这和有关规范是相悖的,且会带来一些问题。目前,Chromium 暂时选择修复将其作为继承属性所带来的问题,使最终表现符合规范。

取值

none

元素及其子元素的文本不可选中。请注意,Selection 对象可以包含这些元素。

auto

auto 的具体取值取决于一系列条件,具体如下:

  • ::before::after 伪元素上,采用的属性值是 none
  • 如果元素是可编辑元素,则采用的属性值是 contain
  • 否则,如果此元素的父元素的 user-select 采用的属性值为 all,则该元素采用的属性值也为 all
  • 否则,如果此元素的父元素的 user-select 采用的属性值为 none,则该元素采用的属性值也为 none
  • 否则,采用的属性值为 text
text

用户可以选择文本。

all

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

contain

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

备注:CSS UI 4 将 element重命名contain

形式定义

初始值auto
适用元素所有元素
是否是继承属性
计算值as specified
动画类型离散值

形式语法

user-select = 
auto |
text |
none |
contain |
all

示例

HTML

html
<p>你应该可以选中这段文本。</p>
<p class="unselectable">嘿嘿,你不能选中这段文本!</p>
<p class="all">点击一次就会选中这段文本。</p>

CSS

css
.unselectable {
  -webkit-user-select: none; /* Safari */
  user-select: none;
}

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

结果

规范

Specification
CSS Basic User Interface Module Level 4
# content-selection

浏览器兼容性

BCD tables only load in the browser

参见