--- title: user-select slug: Web/CSS/user-select tags: - CSS - CSS Property - Reference translation_of: Web/CSS/user-select ---
{{CSSRef}}

CSS 属性 user-select 控制用户能否选中文本。除了文本框内，它对被载入为 {{Glossary("Chrome", "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;

{{cssinfo}}

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

语法

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

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

text
用户可以选择文本。
all
在一个HTML编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。
contain
允许在元素内选择；但是，选区将被限制在该元素的边界之内。
element{{non-standard_inline}}（IE 专有别名）
与 contain 相同，但仅在 Internet Explorer 中受支持。

注意： CSS UI 4 已将 user-select 的 element 属性值重命名为 contain。

形式化语法

{{csssyntax}}

示例

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;
}

Result

{{EmbedLiveSample("Examples")}}

规范

规范 状态 备注
{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}} {{Spec2('CSS4 UI')}} 初始值。也定义了 -webkit-user-select 作为一个不推荐使用的别名 user-select.

浏览器兼容性

{{Compat("css.properties.user-select")}}

参见