user-select

user-select CSS 属性控制用户是否可以选择文本。这不会对作为浏览器用户界面（其Chrome）一部分加载的内容产生任何影响，除了文本框。

试一试

语法

css
/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: all;

/* Global values */
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
  • 如果此元素父元素上user-select 的使用值为none，则使用值为none
  • 否则，如果此元素父元素上user-select 的使用值为all，则使用值为all
  • 否则，使用值为text
text

用户可以选择文本。

all

元素的内容应原子地选择：如果选择包含元素的一部分，则选择必须包含整个元素及其所有后代。如果在子元素中发生了双击或右键单击，则将选择具有此值的最高祖先。

注意：CSS 基本用户界面 模块为user-select 属性定义了一个contain 值，以使选择能够在元素内开始并受该元素边界的限制，但是，这在任何浏览器中都不受支持。

正式定义

初始值auto
应用于所有元素
继承否
计算值如指定
动画类型离散

正式语法

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

示例

HTML

html
<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>

CSS

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

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

结果

规范

规范
CSS 基本用户界面模块级别 4
# content-selection

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅