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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
user-select
all
auto
none
text

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见